How to Setup, Install & Run a Website on your Local Computer 


For WordPress - on an Offline Server - WAMP 


Build it Offline & Upload It Online Later When Finished 


Index: 

Determine Operating System Status 
Download WAMP Server 
Download Latest WordPress 
Installing WAMP Server 
Configure WordPress 
Create a File for All Information 
Download & Install Notepad++ 

Create a Database within phpMvAdmin 

Editing WordPress fwp-config-sample) for Database Acceptance 
Installing WordPress for first use 
Changing important WordPress Settings before use 
Adding Content to the Website 
Adding Pages 
Adding Posts 

Front Page Display - Choosing the "Home" Page and the "Post" Page- 

Creating a Menu 

Adding Widgets 

Adding a Page Header 

Changing the Background Color 

Basic Structure is Done - Congratulations! 

Changing the Posts and Pages! 

Home Page 
Blog Page! 

Contact Us Page! 
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Products Page! 

About Us Page! 

Terms & Conditions Page! 

Viewing the Website Changes! 

Delete the Sample Page | Sample Post & Sample Comment! 

Change the Home Page Title 
Insert a Contact Form 
Insert a Slider on the Home Page 
Insert Header Slider 

Changing the Blog Page for better viewing! 

Viewing the Website One Last Time before Changing Theme. 

WordPress Themes - Personalize Your Website! 

Quick Overview of WordPress Free Themes 
Custom Themes 

Choose a Theme of Your Choice and Start Designing f Assemble) 

Part 1: Moving the Theme for Installation 

Part 2: Making a Complete Backup before New Theme Activation 
Part 3: Backups Made! Time to Activate New Theme 
Part 4: Making Necessary Changes after Activation of New Theme 
Part 5: Viewing Final Changes to Website before Uploading 
Choosing a Web Host for Your Website 
cPanel - Overlook 
Going "Live Online" 

Backing Up 

Upload the www folder contents and extract online 

Edit wp-config.php within file manager to point website to Database 

Create a database with MvSOL Database Wizard & Update wp-config.php 

Import saved database fsaved .sqU with phpMvAdmin 

Edit wp-options file within phpMvAdmin | Change Settings & Save 

Open Back-End First! http://www.yourdoaminname.co.za/wp-admin 

Edit settings to redirect root page to domain name and not "localhost" 
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Install Search & Replace plugin 
Change links with plugin & Save 

Change the remaining links that cannot be changed with Plugin 
Viewing Website & Checking for Errors 
Changing the "Permalinks" 

Index Your Website! 

Create an .xml Sitemap 

Add the XML Sitemap to Google Webmaster Tools 
Disclaimer! 
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Determine Operating System Status 


Before you start you have to know which Operating System is installed. You need this information to establish which 
software you need. 

Please note that only Microsoft® Windows will be covered in this tutorial. With that said, follow the next instructions. 
On the keyboard, press and hold the Windows Start Key 


PI PS P3 FA 


! [q> # $ * 

12 3 4 5 


CJ W E R 


P j es^apd Ho jd the Window s Start Key 





The following box will open. This is the Windows Run Command. 


37 Run 


Type the name of a program, folder, document, or Internet 
resource, and Windows will open it for you. 

Spen: 1 dXdlag 

A 


▼ 

U [ OK 

Cancel 

Browse... 










Type dxdiag in the open box. 


Run 


lal 


Type the name of a program, folder, document, or Internet 
resource, and Windows will open it for you. 


ESI 

i 


Click OK. 


Open: 
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When the following box open, wait for the WHQL Digital Signatures check to load. If this is the first time you do this, the 
program will ask your permission first to check for signatures. Click OK to confirm that you want to check. 


Take Note that this is not harmful to your computer, it is a built in service within the Operating System. 


€> DirectX Diagnostic Tool 


System Display 1 | Display 2 | Sound 1 | Sound 2 Sound 3 | Input 


This tool reports detailed information about the DirectX components and drivers installed on your system. 

If you know what area is causing the problem, dick the appropriate tab above. Otherwise, you can use the Tslext Page' button below to 
visit each page in sequence. 


System Information 


Current Date/Time: 
Computer Name: 


32Bit or 64 Bit 
Cannot be Both 


Operating System: 


Windows 7 Ultima 

mm [kijMi i ^ 


t<^4-bi^6 


Language 

System Manufacturer: Gigabyte Technology Co., Ltd 
System Model: 

BIOS 
Processor 
Memory 
Page file. 

DirectX Version: DirectX 11 


. 1, Build 7600) 

■a ii inj 


64Bit 


Award Modular BIOS V6.00PG 
In tel (R) CoreCTM] 

J RAM 


\V\ Check for WHQL digital signatures 
DxDiag 6. 


Wait while loading... 

H.7600. 1638 5 32-bit Unicode Copyright © 1998-2006 Microsoft Corporation. All rights reserved. 


Help 


Run 64-bit DxDiag 


Next Page 


Save All Information... 


Exit 


Above you can see 64-Bit, that means Windows is 64-Bit and I should only install WampServer 64-Bit. You cannot have 
both installed at the same time. 

Now that you have checked your status, the next would be to download the software needed. 
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Download Files 

Download the following two files - It's Free - It's All We Need! 


WampServer 

Download: http://www.wampserver.com/en/download.php 

Depending on Your Operating System (Windows XP or Windows 7) select the Bit type - 32Bit or 64Bit. In most 
cases, Windows XP will be 32Bit, but nonetheless, please make sure by following previous instructions. 


U |» WampServer 

Apache, PHP, MySQL on Windows 5TRRT 


4 


FDRMHT10N FORUM CLOUD HOSTING 


DOWNLOADS 


WampServer is an open source project, free to use (GPL licence). You will find the beta versions at the Addons 
section. 


WAMPSERVER 


WAMPSERVER (64 BITS & PHP 5.3) 2.2E 


Apache 2.2.22 - Mysql 5.5.24 - PHP 5.3.13 XDebug 2.1.2 XDC 1.5 PhpMyadmin 

3.4.10.1 SQLBuddy 1.3.3 webGrind 1.0 


0 


WAMPSERVER (32 BITS & PHP 5.3) 2.2E 


II 


Apache 2.2.22 - Mysql 5.5.24 - PHP 5.3.1 3 XDebug 2.1 .2 XDC 1 .5 PhpMyadmin 

3.4.10.1 SQLBuddy 1.3.3 webGrind 1.0 

chanaeloa 


WAMPSERVER (64 BITS & PHP 5.4) 2.2E 


Apache 2.2.22 -Mysql 5.5.24 -PHP 5.4.3 XDebug 2.1.2 XDC 1.5 PhpMyadmin 

3.4.10.1 SQLBuddy 1.3.3 webGrind 1.0 

chanqeloq 


WAMPSERVER (64 BITS & APACHE 2.4) 2.2E 


Apache 2.4.2 - Mysql 5.5.24 - PHP 5.4.3 XDebug 2.1 .2 XDC 1 .5 PhpMyadmin 3.4.10.1 
SQLBuddy 1.3.3 webGrind 1.0 


WAMPSERVER (32 BITS & PHP 5.4) 2.2E 


Apache 2.2.22 -Mysql 5.5.24 -PHP 5.4.3 XDebug 2.1.2 XDC 1.5 PhpMyadmin 

3.4.10.1 SQLBuddy 1.3.3 webGrind 1.0 

chanaeloa 


WordPress Installation Files 

Download: http://wordpress.org/download/ 



WordPress.org 


slarc^WuraPreSCT^ | ^ uo 


Showcase Themes Plugins Mobile Support Get Involved About Blog Hosting Download 


Download WordPress 


WordPress is also available in English. 


Stable Download 
Beta Releases 
Nightly Builds 
Subversion Access 
Download Counter 
Release Archive 
Source Code 


The latest stable release of WordPress (Version 3.4.2) is available in two formats 
from the links to your right. If you have no idea what to do with this download, 
we recommend signing up with one of our web hosting partners that offers a 
one-click install of WordPress or getting a free account on WordPress.com. 

What’s Next? 

With our famous 5-minute installation, setting up WordPress for the first time is simple. 
We’ve created a handy guide to see you through the installation process. If you’re upgrading 
your existing installation, we’ve got a guide for that, too. And should you run into any trouble 
along the way, our support forums are a great resource, where seasoned WordPress 
experts volunteer their time to help you get the most out of your blog. 






zip — 4.7 mb 



Download tar.gz— 4.3 mb 

J 

Release Notification 


We've got a handy mailing list that 
we send a friendly message to 
whenever there’s a new stable 
release for you to enjoy. 

Email Address Join 


Looking for a Mobile App? 

You can find the right app for your mobile device on our mobile apps page or use the button 
below to find the app in the app store on your device. 



Privacy | License / GPLv2 See also Hosted WordPress.com | WordPress.TV Videos | WordCamp Events ! BuddyPress Social Layer | bbPress Forums | WP Jobs 1 Matt 
E Like | {456k| [*r Follow ©WordPress] CODE IS POETRY 
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Install WAMP Server 


Open the location where the files were downloaded to. Select WAMP Server and open the file. If asked for security 
confirmation, select Run. We trust this program as it is from a trusted source. 


File Edit View Tools Help 




Organize ▼ ||] Open Share with ▼ 

E-mail New folder 








^^Desktot^^^ 


E Desktop 
Libraries 
(H) Documents 
Music 

H Pictures 
S Videos 
Homegroup 
P BabbaT-Training 
;%■ Computer 
^ Network 
lilp Control Panel 
Recycle Bin 


M 


wampserver2.2e- 

php5.4.3-httpd2. 

2.22-mysql5.5.24- 

x64 


' 

wordpress-3.4.2 


OPEN FILE 


Open File - Security Warning 


The publisher could not be verified. Are you sure you want to 
run this software? 

E l| Name: ...er2.2e-php5.4.3-httpd2.2.22-mysql5.5.24-)(64.exe 

Publisher: Unknown Publisher 
Type: Application 

From: C\Users\BabbaT-Training\Downloads\wampserv... 



1 

L Run J 

1 Cancel 


[V] Always ask before opening this file S E L E C T RUN 




This file does not have a valid digital signature that verifies its 
publisher. You should only run software from publishers you trust. 

How can I decide what software to run? 


The following windows will open. Click next to follow the installation prompts. Steps follow from left to right and down. 


@ Setup - WampServer2 


[UJJ 

WampServer 


Powered by 
Alter Way 
The French 
Open Source 
Service Provider 


[Apache 

: 2.2.22 

MySQL 

: 5.5.24 

1 PHP 

: 5.4.3 

PHPMyAdmin : 

: 3.5.1 

SqlBuddy 

: 1.3.3 

I^Debug 

: 2.2.0 A 


Welcome to the WampServer 2 
Setup Wizard 

This will install WampServer 2.2 on your computer. 

It is recommended that you dose all other applications before 
continuing. 

Click Next to continue, or Cancel to exit Setup. 


WAMP VERSION INFO 


(yj Setup -WampServer 2 


License Agreement 

Please read the following important information before continuing. 




= read the following License Agreement. You must accept the terms of this 
agreement before continuing with the installation. 


DAMAGES ARISING 

OUT OF THE USE OR INABILITY TO USE THE PROGRAM CNCLUDING BUT NOT 
LIMTTED 

TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES 
SUSTAINED BY 

YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH 
ANY OTHER 

PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF 
THE 

POSSIBILITY OF SUCH DAMAGES. 


□ 


(§) I accept the agreement 

I do not accept the agreement 


] ^ PLEASE READ 



[ < Back | 

Next > 

|| Cancel 
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The last window will ask you to select the internet browser that will be used. If you don't know just select open and 
continue. 


(IJ) Setup - WampServer2 


i 1—1 1 


PHP mall parameters 




Please specify the SMTP server and the adresse mail to be used by PHP when using 
the function mailQ. If you are not sure, just leave the default values. 


r SMTP: T 


1 localhost 1 

l 

LEAVE LOCAL HOST 

Email: | 

1 

1 you@yourdomain 1 

1 ENTER YOUR EMAIL 






On the left side is the last prompt for WAMP 
Server before installation is complete. 

Enter the required information and click next 
to finish installation. 

Remember to safe the information. 


(You can also leave the email as is) 


WHEN DONE INSTALLING, 
WAMP’S ICON WILL APPEAR IN 
THE TRAY ARE A! 





WAMP SERVER - server Offlii 

A. 

■a-, 10:21PM 

2012/11/12 


Whenever this icon is green and visible, it means WAMP 
Server is running. 

Two ways to interact with this icon: 

Left Click - Opens Menu View 
Right Click - Opens Exit Menu 


To interact with the WAMP icon just simply left click on it and select the desired option. 
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IF THE ICON Dl SSA PEARS, 
CLICK ON ’I 'HE ARROW TO 



Settings will be different for every user. If you can't find the green 
WAMP Server it either means WAMP is not running or the icon is 
hidden within the desktop tray. 

With every PC restart WAMP will be shutdown. Run the shortcut on the 
desktop to start WAMP again. While starting the green "W" icon will 
appear within the system tray ready for access. 


THIS IS VO L ) R WAMPSE RVE R! 


TO ACCESS IT , JUST LEFT 
CLICK ON 1 HE GREEN W" 
AND THE WINDOW WILL 
POP-UP. 


IF YOU RIGHT-CLICK THE W" 
THE EXIT MENU WILL SHOW 


mr 



M 

0 phpMyAdmin 


N 

[pjj] www directory 


cc 

Ini Apache ► 


£ 

D PHP ► 


Cc 

B MySQL ► 


kj 

Debug 


» 

1 0 webGrind 


5; 

Quick Admin 



Start All Services 


§ 

Stop All Services 



Restart All Services 



Put Online 

4 


v—t n 


Customize... 


S V 4> 


10:24 PM 
2012/11/12 


As per default settings everything should be OK. 

You do not need to put it online. 

Three (3) menu items will be used: 

i. localhost -Viewing Your Website 

ii. phpMyAdmin - Databases Access 

iii. www directory - Root Access to WordPress Files 
Localhost: 

Use this to view your website and to log-in to the Back-End. 


PHPMYADMIN 
THE SERVER DATABASE 


PEI I’MYA DM I N Wl LL B E USE D TO 
CREAT E A DATABASE FOR YOUR 
WEBSITE! 

IGNORE ALL OTHER SETTINGS AS 
WE Wl LL NOT WORK WITH TH EM! 



H V 


phpMyAdmin: 

Use this to create | edit | delete databases. 

Later on while moving the website online , this will be 
used to make a backup of your database as well as 
making changes to a database or database table. 
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www Directory: 


WWW DIRECTORY 


THIS IS WHERE YOUR WEBSITE FILES 
WI LL GO. 

SEE I I AS WWW 
-WORLD WIDE WEB 


THE PA I I I; C:\WAM PWVWW 
ALL WORD PRESS FILES GOES HERE! 



Start All Services 
Stop All Services 
Restart All Services 

Put Online 


y p 


Customize,.. 


10:28 PM 
2012 / 11/12 


C:/Wamp/www 

Use this as the root folder for your website files. 

When you upload your finished website to the online 
hosting environment the exact process will occur when 
using cPanel® hosting. Note that this tutorial is based on 
cPanel®. 



► Computer ► Local Disk [CO ► wamp 


File Edit View Tools Help 
Organize T Include in library » Share with T 


* Favorites 
E Desktop 
ly Downloads 
. Recent Places 


a Desktop 
-a Libraries 

Ijj Documents 

> Jft Music 

\> Pictures 

> H Videos 

> Homegroup 

> |f BabbaT -Training 
a -Si Computer 

El 

M Intel 

PerfLogs 

[> J Program Files 
J Program Files [x8S] 
RaidTool 


► WWW 



New folder 


C 


index. ph^^ 

C :/WAMP/WWW 


Date modified 

2012/11/12 10:J 


AFTER INSTALLATION, THE 
FOLLOWING FILE WILL BE IN 
THE 'WWW FOLDER AS PE R 
DEFAULT SETTINGS. 


YOU DO NOT NEED THIS 
FILE AND MAY DELETE IT. 




NOTE: THE PATH TO 
'WWW THAT WILL ACT 
AS THE "SERVER" 



YOUR FILES WILL GO HERE 


C:/WAM P/WWW Directory 

As mentioned above, all website files 
will go into this folder "root". 

By default, it's located at 

c:/wamp/www 

After installing WAMP Server a 
preview file with the name index. php 
will be in the www folder. You can 
delete this file as you will be 
uploading your own files to this 'www' 
folder. 


j^^^ndeTph^J 2012/1 

0 pen 

or Edit with Notepad+ + 

Restore previous versions 
Send to ► 

Cut 

Copy 

Create shortcut 

Rename 

Properties 

RIGHT-CLICK - DELETE 
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Configure WordPress - Move|Edit|Create Files 


•V Favorites 
E Desktop 
, Downloads 
Recent Places 

K Desktop 
□ Libraries 


M 




wampserver2.2e- ^wordpress-3,4.2 
php5,4.3-httpd2, 

2. 22- my sq 155 24- 


13] Documents 



Music GO BACK TO THE 1 

TOWNLOAD S FOLDE R 

Extract All... 

Ifel Pictures AND COPY THE WORDPRESS FOLDER. 

pf Edit with Notepad+ + 

0 Videos 


Open with... 

^ Homegroup NOTE: FILES ARE 

[N .ZIP FORMAT. DO 

Share with ► 

7 B^aT-Tmning ygg .KARAS 

TH E SERVER CANNOT 

Restore previous versions 

f Computer EXTRACT RAR I II 

TS. 

Send to ► 

^ Network 



Sp Control Panel 


Cut 

c Recycle Bin 


f Copy | 



Create shortcut 



Delete 



Rename 


Open 

Open in new window 


Properties 


Downloading & Uploading files to and from an Online Host should be done with the file format: 

.zip 

Do not use .RAR files as cPanel will not recognise the file format. Also, when compressing files make sure that the 

extension is .zip 


^ j v I Jt ► Computer 


Copy the wordpress-3.4.2.zip file to c:/wamp/www 


File Edit View Tools 


Organize ▼ 

Include in library ▼ 

Share with ▼ New folder 


► Computer F^jcal Disk (C:) ► wamp ► vw* 

| 

* 


aiM 




> 

File Edit View Tools Help 





d Favorites 
E Desktop 
jf). Downloads 
Recent Places 

d E Desktop 
* U Libraries 

> [j] Documents 
t> ^ Music 

> S Pictures 
D 0 Videos 

! Homegroup 
> [p BabbaT-Traii 
d U^i Computer 
d £ Local Disk 
0 | £ Intel 
i PerfLogs 
> IX Prograi 
t> X Program 
T RaidTool 


PAST I: THE COPIED WORDPRESS 
FOLDER WITHIN THE "WWW" FOLDER 


Expand 

Open in new window 

Add to VLC media player's Playlist 

Play with VLC media player 

Share with 

Restore previous versions 
Include in library 


> X Users 

Send to 

wamp | 


JU alias 

Cut 

t> 0 apps 


t> 0 bin 

p>ast^**| 

t> 0 lang 

Delete 

0 logs 

Rename 

X scripts 


0 tmp 

New 

t> X tools 

Properties 


Organize ▼ Q Open ▼ New folder 

. 


Date modified 

Type Size 

aC Favorites 

r 


■ Desktop 

1 Jfl wordpress-3.4.2 1 

Open 

j... Compressed (zipp... 4 806 KB 

J4- Downloads 
< j^l Recent Places 




Open in new window 



J Extract All... ~| 


H Desktop 


yr Edit with Notepad* + 


3 Libraries 


Open with... 


3 Documents 



Restore previous versions 


Jl Music 
gj Pictures 



Send to ► 


9 Videos 



Cut 


4$ Homegroup 



Copy 


P BabbaT-Training 



Paste 


Computer 
Sm Local Disk (O) 
Intel 

jt PerfLogs 



Create shortcut 

Delete 

Rename 


Jti Program Files 



Properties 


Ji Program Files (x86) 

= 




Ji RaidTool 


WITH THE WORDPRESS FOLDER LOCATED IN THE "WWW’ 

Jb Users 


FOLDER, YOU NEED TO EXTRACT THE FILESTOTHAT 

^1 wamp 


FOLDER. REMEMBER, THE FILES ARE COMPRESSED AT THIS 

i£ alias 


STAGE AND NEEDSTO BE EXTRACTED FOR USE! 

apps 





bin 


RIGHT-CLICK ON THE WORDPRESSFOLDER AND SELECT 

Jjt lang 
JH logs 

K tmp 
Jib tools 


EXTRACT ALL. 








±i Windows 





t - a New Volume (D:) 






Note: Make sure the file is in the 'www' folder. 

As indicated in the picture above, right click on the .zip folder 
and select Extract All... 
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Sleeping 




U- 


I 


► Computer ►[Local Disk (C:) ► wamp ► www ►J 


File Edit View Tools Help 
Organize ▼ 3 Open ▼ New folder 


& Favorites 
E Desktop 
Downloads 
Recent Places 


E Desktop 
Q Libraries 
j Documents 
Music 
B Pictures 
9 Videos 
Homegroup 
p BabbaT-Training 
Computer 
Local Disk (C:) 

£ Intel 
PerfLogs 
) Program Files 
M Program Files (x86) 
ic- RaidTool 
ti, Users 
ip wamp 
alias 
I M apps 
9 bin 
J4 lang 
0 logs 
0 scripts 
k tmp 
k tools 


.ib Windows 


Name 

Date modified 

Type 

Size 

1 wordpress-3.4.2 I 

2012/11/12 10:11 ... 

Compressed (zipp... 

4 806 KB 



Change the path to C:/wamp/www as per default settings. Once you click extract, a folder will be created under 'www' 
with the filename 'wordpress'. 


Rlt Edit View Toole Help 
Organize » Zi Open * New folder 

■ Desktop 
t Downloads 
Recent Places 


Music 
fctj Pictures 
9 Videos 
Homegroup 
A BabbaT-Training 
Computer 
SL local Disk (C:) 

U Intel 

k Program Files 
k Program Files (]66) 
k RaidTool 
k Users 




NEWLY EXTRACTS P FOLDER THAT WAS C REATE P WORPPRESS 



The newly extracted folder can be seen with 
the name wordpress. 

The files within the 'wordpress' folder needs to 
be moved to the 'root' folder, which is "www" 




[ wordpress 
> [ju wordpress-3.4.2 
P £ Windows 
• a New Volume (D:) 


wp-admin 
M wp-content 
L.; wp-indudes 
l_, index.php 

El license 
!•] readme 
l~] wp-activate.php 
wp-app.php 
l~1 wp-blog-header.php 
Q wp-comments-post.php 
Lj wp-config-sample.php 
D wp-cron.php 
El wp-links-opml.php 
r wp-load.php 
r 1 wp-login.php 

| , wp-mail.php 

f l wp-settings.php 
lJ wp-signup.php 
1_] wp-trackback.php 
Lj xmlrpc.php 

ALL THE FILES WIT 
MOVE TO "WWW - 
T HE WWWFOLDE 


Date modified 


2012/11A2 10:36 ... 
2012/11 /12 10:36... 
2012/11/12 10:36 ... 
2012/11/12 10:36 ... 
2012/11/12 10:36™ 
2012/11/12 10:36... 
2012/11/12 10:36... 
2012/11/12 10:36... 
2012/11 /12 10:36... 
2012/11A2 10:36™ 
2012/11/12 10:36 ... 
2012/11/12 10:36... 
2012/11/12 10:36™ 
2012/11/12 10:36... 
2012/11/12 10:36... 
2012/11/12 10:36 ... 
2012/11/12 10:36... 
2012/11 A2 10:36™ 
2012/11/12 10:36... 
2012/11 /12 10:36... 


Type 


File folder 

File folder 

File folder 

PHP File 

Text Document 

Firefox HTML Doc... 

PHP Rle 

PHP File 

PHP File 

PHP File 

PHP File 

PHP File 

PHP File 

PHP File 

PHP File 

PHP File 

PHP File 

PHP File 

PHP File 

PHP Rle 


10 KB 
18 KB 


H I N T H E WO R D P R E SS F O L D E R N E E DS TO 
THE REASON FOR THIS IS OU R SE RVE R READS 
RAND CURRENTLY ITS EMPTY. 


Move all the files in the newly created folder 
'wordpress' to the 'www' folder. 

The files need root access, and currently they are within 
a wordpress folder which is a sub folder of the root 
'www' folder. © 
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► Computer ► Local Disk [G] ► wamp ► www ► word press ► 
File Edit View Tools Help 


Organize 1 


5 Open New folder 


Name 


Date modified 

Type 

Size 

it wp-admin 



■36 ... 

File folder 


Send to 



wp-content 


36 ... 

File folder 


wp-includes 

n 

n 

!= 

r-l- 

[36 ... 

File folder 


index.php 

Copy 


[36 ... 

PHP File 

1 KB 

license 

{ ~ rcafc rl-irii+i-i it 1 

[36 ... 

Teat Document 

20 KB 

|Wj readme 

Delete 

Rename 


[36 ... 

Firefox HTML Doc.,. 

9 KB 

J wp-activate.php 


36 ... 

PHP File 

5 KB 

wp-app.php 


[36 ... 

PHP File 

2 KB 

wp-blog-header.php 

Properties 

|36 ... 

PHP File 

1 KB 

wp-comments-post.php 


2012/11/12 10:36 ... 

PHP File 

4 KB 

wp-config-sample.php 


2012/11/12 10:36 ... 

PHP File 

4 KB 

wp-cron.php 


2012/11/12 10:36 ... 

PHP File 

3 KB 

wp-links-opml.php 


2012/11/12 10:36 ... 

PHP File 

2 KB 

wp-load.php 


2012/11/12 10:36 ... 

PHP File 

3 KB 

[ j wp-login.php 


2012/11/12 10:36 ... 

PHP File 

29 KB 

wp-mail.php 


2012/11/12 10:36 ... 

PHP File 

8 KB 

wp-settings.php 


2012, 11A2 10:36 ... 

PHP File 

10 KB 

wp-signup.php 


2012,11/12 10:36 ... 

PHP File 

18 KB 

wp-trackback.php 


2012/11,12 10:36 ... 

PHP File 

4 KB 

xmlrpc.php 


2012,11,12 10:36 ... 

PHP File 

3 KB 


Bl Pictures 
Q Videos 
+*4 Homegroup 
p BabbaT -Training 
; 1 - Computer 

Local Disk [CO 
Intel 

PerfLogs 
Program Files 
Program Files [x86) 
RaidTool 
Users 
j wamp 
alias 
apps 
bin 
lang 
logs 

J scripts 
l£ tmp 

j WWW | 

wordpress 
jjj word press -3,4.2 
Windows 

L Bj New Volume (D:) 


SE I.ECT ALL FILES AND C UTI 


Select all files in the wordpress folder and move them to www folder. Do this with cut & paste. 


©c 


► Computer ► Local Disk (C:) f2 wam P ► www 


File Edit View Tools 

Help 





Organize ▼ Q Open 

Include in library ▼ 

Share with ▼ 

New folder 



▻ B Pictures 
■ Videos 

> Homegroup 

> JP BabbaT-Training 



* Name 


Date modified 

Type Size 



, wordpress 

2012/11/12 10:36 ... 

File folder 

Collapse 

-3.4.2 

2012/11/12 10:11 ... 

Compressed (zipp... 4 806 KB 


* Computer 
' & Local Disk (C:) 

> U Intel 

j PerfLogs 

> Program Files 

> Jfj Program Files 
U RaidTool 




^ wordpre 


Open in new window 

Add to VLC media player's Playlist 

Play with VLC media player 

Share with 

Restore previous versions 
Include in library 


> Users 

* l wamp 
0 alias 

Send to 

Cut 

> £ apps 

Copy 

t> Jt bin 


> Jl lang 

Delete 

H logs 

Rename 

scripts 


tmp 

New 

> Jt tools 

Properties 


PASTE THE FILES WITHIN THE "WWW" FOLDER 

THIS WILL ENSURE THAT WHENTHE SERVER 
READS INFORMATION, IT WILL BE LOCATED 
WITH IN THE "WWW FOLDER. 


press 

> LL wordpress-3.4.2 
> J Windows 
t> a New Volume (D:) 
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Done! All necessary files are now located within the "www" folder. 




► Computer ► Local Disk (G) ► wamp ► www 


- v 


File Edit View Tools Help 
Organize ▼ Q Open New folder 

S Pictures 

5 Videos 
Homegroup 

P BabbaT-Training 
Computer 

6 Local Disk (G) 

^ Intel 

^ PerfLogs 
^ Program Files 
^ Program Files (x86) 

RaidTool 
* Users 
^ wamp 
|jl alias 
k£ apps 
bin 
0 lang 
J logs 
scripts 
0 tmp 

^^tool^^^ 

C3 

word press 
ti» wp-admin 
wp-content 
^ wp-includes 
Jy wordpress-3.4.2 


Date modified 


Type 


^^ordgres^J 

Open 

Open in new window 


le folder 

wp-admin 

wp-content 


le folder 
le folder 


Ju wp-includes 

Send to 

* 

le folder 


[j index.php 

Cut 


HP File 

1KB 

0 license 

Copy 


ext Document 
refox HTML Doc... 

20 KB 
9 KB 

| | wordpress-3.4.2 1 

Create shortcut 


ompressed (zipp... 

4 806 KB 

1 1 wp-activate.php 

Delete 

HP File 

5 KB 

D wp-app.php 

Rename 


HP File 

2 KB 

l_j wp-blog-header.php 
[_j wp-comments-post.php 

Properties 


HP File 

1KB 



IP File 

4 KB 

1_J wp-config-sample.php 

2012/11/12 10:36 ... 

PHP File 

4 KB 

Q wp-cron.php 

2012/11/12 10:36 ... 

PHP File 

3 KB 

wp-links-opml.php 

2012/11/1210:36 ... 

PHP File 

2 KB 

[ , wp-load.php 

2012/11/12 10:36 ... 

PHP File 

3 KB 

[_j wp-login.php 

2012/11/12 10:36 ... 

PHP File 

29 KB 

1_J wp-mail.php 

2012/11/12 10:36 ... 

PHP File 

8 KB 

[_J wp-settings.php 

2012/UA2 10:36 ... 

PHP File 

10 KB 

|_J wp-signup.php 

2012/11/12 10:36 ... 

PHP File 

18 KB 

\2j wp-trackback.php 

2012/11 /12 10:36 ... 

PHP File 

4 KB 

xmlrpc.php 

2012/11/12 10:36 ... 

PHP File 

3 KB 


DONE - ALL NECESSARY FILES ARE NOW LOCATED WII El IN I LIE 
"WWW” FOLDER. YOU MAY DELETE THE TWO FOLDER ABOVE AS 
WE WILL NOT NEED THEM ANYMORE. 


The two files above can be deleted. 

Original .zip Folder &The Extracted Folder. 

You may choose to keep the original for troubleshooting or backup. Normally I will delete them as they only contribute 
to size! 


Create Text File for Information 

Sample File - Please save your information! 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - text file - xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
xxxxxxxxxxxxxxxxxx - Site Title & Log-in Information | Email - xxxxxxxxxxxxxxxxxxxxxxxxx 

Email Used: youremail@yourdomain. co.za [.co.za .com .org. bizz. net. co.uk etc] 


My First Offline Website 


Username: 

Password: 

Database Name: 
Database Username: 
Database Password: 


[letter & numbers including _ @] 
[make it as difficult as possible] 
[letters & numbers] 

Not needed for offline version! 
Not needed for offline version! 


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 


Create a file with your website name and save it to a secure location. You can save it under the 'www' folder for now, but remember to move it 
once you start moving the site online. The above text sample is currently the one I personally use when designing and assembling. Feel free to copy 
and make changes as you go along. The important thing is: Save All Information! 
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► Computer ► Local Disk [C:] ► wamp 

► WWW ► T 

111 Search www 

File Edit View Tools Help 

Organize T Open ▼ Print Newfolder 

m - 

g Pictures 

- 

Name Date modified Type Size 


Videos 
Homegroup 
1 BabbaT-Training 
Of) Computer 
& Local Disk [G} 

|£ Intel 
P erf Logs 
Program Files 
Program Files [x86] 
S Raid Tool 
|£ Users 
, wamp 
Jy alias 

S a PP s 
, bin 
, lang 
j* logs 
scripts 
tmp 
jkl tools 

I wp-admin 
j wp-content 
) wp-includes 
I Windows 
l— a New Volume [DO 


4 wp-admin 
j wp-content 
y wp-includes 
index.php 

1 li'.m.i 


mydomainname. details 


2012/11/12 10:36 
2012/11/1210:36 
2012/11/12 10:36 
2012/11/12 10:36 
2012/11/12 10:36 


2012/11/12 10:44 


File folder 
File folder 
File folder 
PHP File 
Text Document 


1 KB 
20 KB 


Text Document 


mydomainname. details - Notepad J 


c;i~ c^in- \i\^, u^i*-, 

— — ^ 


username : 
Password : 


ieui jsKLMUYJdhndb&def sx 


hf dgs@djdkdnsji_kkf je 
j jd]» ir : -)&53n&*j43 , . >? r, PKkdl , ; pi d 


Database-off 1 i ne 

Name : 
user : 

Password : 
server : 


Mywebsite 

root 

'leave blank' 

local host (leave default) 


HIS 


YOU CAN NAME T HI: FILE WHATEVER YOU LIKE. PLEASE KEEP 
E I I.E SAF E AN D C O N FIDE Nil A L AS A EL THE LOG- 1 N I N F O & 

I’ASSWO RDS WI EE 11 E D IS PLAY E D HE RE . YOl I MAY WANT TO MOVE 
I FI F FIEF TO ANOTH E R LOCATION AND NOT KEE P IT IN TH I: ROO 
DIRECTORY OF YOU R WE ESI I E! 


n 


mydomainname, details Date 
Text Document 


modified: 2012/11/1210:44 PM 
Size: 133 bytes 


Date created: 2012/11/12 10:43 PM 


Keep the file opened for the duration of this tutorial as you will refer to it on a regular basis. 


[Back to Topi 
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Download Notepad++ | Install Notepad++ 

Notepad++ is a wonderful little program that can read and write and save different source code. It's Free as well \ but a 
donation to the author's are always appreciated. The same goes for all open Source software like WordPress & WAMP. 
Feel free to make a donation. 


TO 1: PIT FILES YOU WILL NEE DA PROGRAM THAT CAN READ SPECI IIC FILES. OPEN GOOGLE i 

FOR 

AND SEARCH 

Google 

notepad ++ 

— r 

Search 





Do a Google Search for the phrase Notepad++ and hit Search. 




D 


About 61,300,000 results (0.33 seconds) 


Select the 
Notepad++ 
Home and 


C 


feco 


Notepad++ Home 

notepad-plus-plus.org/ 

WB!?|J9W^^nW^flt!Tf£code editor which supports several programming languages 
running under the MS Windows environment. 


Download Features 

V6.1 - V6.1 1 - V6.1.4 - Notepad++ Features. Syntax Highlighting and 

v6.0 - V6.1.6 - Languages - ... Syntax Folding; User Defined ... 

More results from notepad-plus-plus.org » 


navigate to 
their website. 

The Hompage 
of Notepad++. 


Click on Download and the page will redirect 
to another page which looks like: 



GIG 

more languages 



Home > Download > v6.2.1 - Current Version 


Download Notepad++ 6.2.1 


Release Date; 2012-11-11 



Download 


•tr 


tepad++ Download 


Notepad++ Installer : Take this one it you have no idea which one you should take. 

• Notepad++ zip package ; Don’t want to use installer? Check this one (zip format). 

• Notepad++ 7z package ; Don't want to use installer? 7z format. 

• Notepad++ minimalist package : No theme, no plugin, no updater, quick download and play directly. 

• SHA-1 digests for binary packages ; Check it if you're paranoid. 

• Notepad++ source code ; The source code of current version. 

You can find shal digests for binaries package on Sourceforge as well. 

Notepad++ v6.2.1 fixed bugs: 

1. Fix link hotspot colourising issue. 

2. Fix a regression bug about Configurator GUI; font setting controls are disabled. 

3. Fix a crash issue due to the inconsistent userDefineLang.xml. 

4. Fixed bug of UDL2 where "Folder in code" keywords were detected even outside of commnets. 

5. Fixed for the hex number detection bug of UDL2 (for example, 0xfece57 ok, but not 0xfe57ce). 

6. Fix a crash bug while file path as argument and its length is more than 260 characters. 


Click on Download and save the file to your Hard Disk Drive. Once downloaded, locate the file and install the program. 
You can keep all default settings. The program will be used to edit some WordPress files. 
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Create a Database within phpMyAdmin 

In order for WordPress to work , you will need to create a database that will connect with the WordPress File Structure. 
Whenever you make changes or do updates, the database will collect all relevant information. When backing up your 
website, it's crucial to make a backup of the database file as well, (.sql) 



Start WAMP Server by clicking on the desktop icon or the shortcut you created. 



From the system tray, select the 'W' and left click. 
Select phpMyAdmin from the list of options. 


This will open phpMyAdmin - the place where you 
can create, edit or delete databases. 


The following window should open in your internet browser. 


localhost / localhost | pt 

History Bookmarks Jools Help 


[ p& localhost / localhost | phpMyAdmin 3.51 [~+ | 

4 1 tecalhost'phpmyadmin/ 

@ Most Visited [J Getting Started l&ji Latest Headlines 

phpMyAdmin 

& * 4* o' 9 

(Recent tables) .. 


e Google 


Menu - Click on Databases 

•s Status ’ Users Export ^ Import J 3 Settings 


a 


General Settings 


bestwordpresstheme 
ij boomlusemsa 
information_schema 
ij jacstore 
, mysql 

performance_sc hema 
t\ test 


0 


I Server connection collation utf8_general_ci 


3 


Existing Databases 


1 Appearance Settings 

Language q : English 

El 

'Q Theme pmahomme | 


• Font size: | 82% 0 


J* More settings 



Database server 


• Server localhost (localhost via TCP/IP) 

• Software: MySQL 

• Software version: 5.5.24-log - MySQL Community Server (GPL) 

• Protocol version: 10 

• User: root@localhost 

• Server charset: UTF-8 Unicode (utf8) 


. Apache/2.2.22 (Win64) PHP/5.4.3 

• Database client version: libmysql - mysqlnd 5.0.10 - 20111026 - $ld: 
b0b3b1 5c693b7f6aeb3aa66b646fee339f1 75e39 $ 

• PHP extension: mysqli Qi 


phpMyAdmin 


• Version information: 3.5.1, latest stable version: 3.5.5 

• Documentation 

• Wiki 

• Official Homepage 
» Contribute 

• Get support 

• List of changes 


By default, there shouldn't be any databases listed as you did a fresh install. However, if you already have a database, it 
will be shown in the left pane. Whenever you want to edit or delete a database, you can choose it directly from the left 
pane. 

On the top is the menu - click on the word 'Databases' as shown with the arrow. 
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The following window will open. 


^ localhost/ localhost | phpMyAdmin 3.5.1 


<■ » I o c.a I h ostfp h p my a d m i n/ 


• ' Mo:st Visited [..] Getting Started ^ Latest Headlines 


localhost 


phpMyAdmin 

& # # © ^ 


(Recent tables) . 


E 


bestword presstheme 
boomlusernsa 
information_schema 
jacstore 
( J mysql 

perform a nce_sc hem a 
, j test 

treelucernsa 


Li Databases 


U SQL 


Status 


’ Users 


l± i Export 


^ Import 


$ Settings 


03 Synchronize 


Databases 

a Create database gj 


Collation 


P~| Cneale 


Database 


Master replication 


□ 

bestword presstheme 

f Replicated 

n Check Privileges 

□ 

boomlusernsa 

Replicated 

« Check Privileges 

□ 

information schema 

✓ Replicated 

Check Privileges 

□ 

jacstore 

Replicated 

* Check Privileges 

□ 

mysql 

f Replicated 

* - Check Privileges 

□ 

perform a nce_sc hem a 

f Replicated 

* Check Privileges 

□ 

test 

f Replicated 

i Check Privileges 

□ 

treelucernsa 

Replicated 

’ Check Privileges 

Total: 8 


Check All / Uncheck All sei'ecfed: Drop 

likJj Enable Statistics 


■ ijv Note: Enabling the database statistics here might cause heavy traffic between the web server and the MySQL server. 


Before creating a new database, open the text file that you will use to capture and save all data . 

Let's fill in our text file first before moving on. Remember, keep this information safe! 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - text file - xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
xxxxxxxxxxxxxxxxxx - Site Title & Log-in Information | Email - xxxxxxxxxxxxxxxxxxxxxxxxx 

Email Used: info@mydomain.co.za Use Your Email 


My First Offline Website 

Username: 

Password: 

Database Name: 
Database Username: 
Database Password: 


hdten@kchms_mjsklshjk@nmdkkmdn74793@84kd 
89M<>::0893yjmLP{:D943j,kOI(DK300lc"{}P{)_89ju34 
8943jms8u2309vkjs827uj 
Not needed for offline version! 

Not needed for offline version! 


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 


Name Your Site 

Difficult! - Use Random Characters 
Difficult! - Use Random Characters 
Name of Database 
Later... - Online 
Later... - Online 


Make sure that the entered information is correct. The username and password should be difficult to hack! Make 
random characters so that it will be difficult for anyone. Whenever you log-in to the website, just copy and paste the 
text to the relevant fields. 
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To create a new database, go back to the database screen and do the following: 


localhost/ localhost | phpMyAdmin 3.5.1 - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


^ localhost/ localhost | phpMyAdmin 3.5.1 ^ + 
f;® localhost- phpmyad min/ 

■ ' Most Visited [.J Getting Started Sv Latest Headlines 


phpMyAdmin 

fit 4 # E C 


(Recent tables) . 


0 


j be stwo rd p re s stheme 
j boomlusernsa 
intorrnation_schema 
jacstore 
mysql 

pe rf o r m a nce_sc he m a 
J test 

treelucernsa 


rf! localhost 


Databases 

O SQL 

|JL Status 

•! Users 

Export 

^ Import 

Settii 


Databases 


4 


Enter the Name of the Database 


r > 

6 Create database 

and click Create 


■3jms8u2309vkjs827uj| 

Collation H|I Create 






Database * 

Master replication 


□ 

be stwond p res sth e me 

^ Replicated 

* Check Privileges 

□ 

boomlusernsa 

^ Replicated 

* Check Privileges 

□ 

information_schema 

^ Replicated 

* Check Privileges 

□ 

jacstore 

^ Replicated 

- Check Privileges 

□ 

mysql 

^ Replicated 

’ Check Privileges 

□ 

p e rf o rmanc e sc hem a 

^ Replicated 

- Check Privileges 

□ 

test 

^ Replicated 

* Check Privileges 

□ 

treelucernsa 

^ Replicated 

- Check Privileges 

Total: 3 


Check All / Uncheck All With selected: 

flia Enable Statistics 


d Drop 


Enter the database name within the field 'Create database' and select Create. You can either type it or use copy and 
paste which I suggest you do. (Copy it from your text file and paste it into the required field - eliminating typo errors). 


(Recent tables) HI Databases 

C 


I 8943jms8u2309vkjs827 uj 


bestwordpresstheme 

boomlusernsa 

information_schema 

jacstore 

mysql 

performance_schema 

test 

treelucernsa 


4 Create database 



[" 3jms8u2309vkjs827uj [ 

| Collation 


0 Create 


Database « 

Master replication 




[8943jms8u2309vkjs827uj 

| / Replicated 


Check Privileges 

□ 

bestwordpresstheme 

V Replicated 

■■ 

Check Privileges 

□ 

boomlusernsa 

✓ Replicated 

m 

Check Privileges 

□ 

information_sc hema 

^ Replicated 

■j 

Check Privileges 

□ 

jacstore 

^ Replicated 


Check Privileges 

□ 

mysql 

V Replicated 


Check Privileges 

□ 

performance_sc hema 

^ Replicated 

JK 

Check Privileges 

□ 

test 

^ Replicated 

■i 

Check Privileges 

□ 

treelucernsa 

✓ Replicated 

US 

Check Privileges 


Total: 9 





Database 8943jms8u2309vkjs827uj has been 
created. 


_ Check All / Uncheck All With selected: 

i Enable Statistics 


Drop 


After clicking on "Create" the database 
was created! It now shows within the list 
in the middle and on the left. 

This is all you need to do for now! Close 
the window. 


,a\ Note: Enabling the database statistics here might cause heavy traffic between the web server and the MySQL server. 
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Editing WordPress (wp-config-sample) for Database Acceptance 

The database was created successfully! For the website to work, WordPress needs to communicate with the database. In 
order for this to happen, a file within the root folder must be edited. By default; 

The name of the file is: 

Locate the file: C:/wamp/www/wp-config-sample.php 

wp-config-sample. php Default per installation! 

wp-config.php What it should be! 

Locate the file within the root 'www' folder and rename it to wp-config. 


Jd ► Computer 

1 Local Disk (C:) ► wamp ► www ► 1 


File Edit View Tools Help 


Organize ▼ 0 Open w 

E-mail New folder 


& Favorites 

Name 


Date modified 

Type 

Size 

E Desktop 

^ wp-admin 


2012/12/11 04:20 ... 

File folder 


Downloads 

wp-content 


2012/12/11 04:20 ... 

File folder 


*211 Recent Places 

Jt, wp-indudes 


2012/12/11 04:20 ... 

File folder 



index 


2012/01/08 05:01 ... 

PHP Script 

1KB 

^ Libraries 

Q license 


2012/05/06 07:28 ... 

Text Document 

20 KB 

(j) Documents 

[S] readme 


2012/11/30 12:57 ... 

Firefox HTML Doc.. 

9 KB 

Music 

^J> wp-activate 


2012/11A7 03:11 ... 

PHP Script 

5 KB 

B Pictures 

^ wp-blog-header 


2012/01/08 05:01 ... 

PHP Script 

1KB 

0 Videos 

™ wD-comments-oost 


2012/04A0 05:21 ... 

PHP Script 

4 KB 


| "wp-config-sample | 




4 KB 



Open 


Homegroup 

wp-cron 



3 KB 

& Hugo (HUGO-PC) 

wp-links-opml 


Edit with Adobe Dreamweaver CS6 


2 KB 


wp-load 


Edit 


3 KB 

Computer 

wp-login 


7-Zip 

* 

29 KB 

& Local Disk (C:) 

wp-mail 

w 

Scan 


8 KB 

« — a New Volume (D:) 

^B>_ wp-settings 

w 

Shred 


10 KB 

i — a New Volume (&) 

wp-signup 

m 



18 KB 

« — a New Volume (R) 

wp-trackback 

Edit with Notepad++ 


4 KB 

t — a New Volume (G:) 

^ xmlrpc 


Open with 

► 

3 KB 

i—» New Volume (H:) 


Add to archive... 





Add to "wp-config-sample.rar" 





m 

Compress and email... 



Network 


m 

Compress to "wp-config-sample.rar" and email 





Restore previous versions 



Rename the file to: wp-config 



Send to 

► 




Cut 






Copy 






Create shortcut 










| 


Rename 1 





Properties 









After renaming the file, right click on the wp-config file and select 'Edit with Notepad++'. 


^ wp-admin 
Jti wp-content 
.%! wp-indudes 
^ index 
[_] license 
i*»] readme 
wp-activate 
wp-blog-header 
^^^w^comments-post 

wp-links-opml 
wp-load 
^!> wp-login 
wp-mail 
wp-settings 
^ wp-signup 
wp-trackback 
^1> xmlrpc 


Date modified 

2012/12/11 04:20 .. 
2012/12/11 04:20 .. 
2012/12/11 04:20 .. 
2012/01/08 05:01 .. 
2012/05/06 07:28.. 
2012/11/30 12:57 .. 
2012/11/1703:11 .. 
2012/01/08 05:01 .. 
2012/04/10 05:21 .. 

Open 

Edit with Adobe Dreamweaver CS6 

Edit 

7-Zip 

Scan 

Shred 

^di^it^Notepac^^^^ 

Add to archive... 

Add to "wp-config. rar" 

Compress and email... 

Compress to "wp-config. rar" and email 
Restore previous versions 

Send to 


Copy 

Create shortcut 

Delete 

Rename 

Properties 


Type 

File folder 
File folder 
File folder 
PHP Script 
Text Document 
Firefox HTML Doc... 
PHP Script 
PHP Script 
PHP Script 
Script 
Script 
Script 
Script 
Script 
Script 
Script 
Script 
Script 
Script 


After renaming, 
select file and open 
with Notepad++ 
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The following will appear. 


/ C:\wamp\www\wp-config.php- Notepad + + 

File Edit Search View Encoding Language Settings Macro Run TextFX Plugins Window ? 

o E3 1 S © a o <§) I H >£] Gl I P Ci | M 'fe I * * I t! g I S? fl Q@(I) ISiEill 


wpoonfig php | 

~ Bpphp 


* The t 


e configurations of the WordPress. 


* This file has the following configurations: MySQL settings, Table Prefix, 

* Secret Keys, WordPress Language, and ABSPATH. You can find more information 

* by visiting {Blink http://codex.wordpress.org/Editing_wp-config.php Editing 

* wp-config.php} Codex page. You can get the MySQL settings from your web host. 

* This file is used by the wp-config.php creation script during the 

* installation. You don't have to use the web site, you can just copy this file 

* to "wp-config.php" and fill in the values. 

* Bpackage WordPress 


// ** MySQL settings - You can get this info from your web h 
/** The name of the database for WordPress */ 
def ine ( ’ DB_NAME ' , 'database_name_here' ) ; 


. Don't change this if i 


* Authentication Unique Keys and Salts. 

* Change these to different unique phrases! 

* You can generate these using the {Blink https://api.wordpress.Org/secret-key/l.l/salt/ WordPress.org secret-key service) 

* You can change these at any point in time to invalidate all existing cookies. This will force all users to have to log in 

* Bsince 2.6.0 


define {'AUTH_KEY', 
define { ' SECURE_AUTH_KEY • , 
define ( ’ LOGGED_IN_KEY ’ , 
define < ' NONCE_KE Y ' , 
define {'AUTH_SALT', 
define ( ' SECURE_AUTH_SALT ' , 
define ( ’ LOGGED_IH_SALT ’ , 
define ( ' NONCE_SALT • , 


put your unique 
put your unique 
your unique 
put your unique 
your unique 
put your unique 
put your unique 
put your unique 


phrase here 
phrase here 
phrase here 
phrase here 
phrase here 
phrase here 


>HP Hypertext Preprocessor file 


Ln:l Col : 1 Sel:0 


Let's have a closer look of what needs to be changed!!! 


C:\wamp\www\wp-config.php - Notepad + 


File Edit Search View Encoding Language Settings Macro Run TextFX Plugins Window ? 

0 S ® * * I ® 3 1 "-3 [jjm 

_J wp-config.php ) 


Ippphp - 

/** 


The base configurations of the WordPress. 

This file has the following configurations: MySQL settings. Table Prefix, 
Secret Keys, WordPress Language, and ABSPATH. You can find more information 
by visiting {01inlc http://codex.wordpress.org/Editing_wp-config.php Editing 
wp-config.php} Codex page. You can get the MySQL settings from your web host. 

This file is used by the wp-config.php creation script during the 
installation. You don’t have to use the web site, you can just copy this file 
to "wp-config.php" and fill in the values. 

0package WordPress 


Changes needed: 


// ** MySQL settings - You can get this info from your web host 
/** The name of the database for WordPress */ 
define ( ’ DB_HAME 1 , • (d 1 . ^ | ; 


MySQL database username */ 


/** MySQL database password */ 

define ( 1 DB_PASSWORD • , ’ Ipassword here] 1 ) ; « 


/** MySQL hostname */ 

def ine ( ’ DB_HOST ’ , ’ localhost’ ) ; 


/** Database Charset to use in creating database tables. */ 
define ( ’ DB_CHARSET ’ , ’ utf 8 ’ ) ; 


/** The Database Collate type. Don’t change this if in doubt. */ 
define ( ’ DB_COLLATE ’ , ’ ’ ) ; 


^ Database name "8943jms8u2309vkjs827uj" 

Username for Offline - root 
3 Database Password - Leave Blank for Offline 


*# 0 + 

Authentication Unique Keys and Salts. 


Change these to different unique 
You can generate these using thel 




J{0^il^ittp^^/ap^wordpress^3rg/secret-lcey/^^/sa^ 
You can change these at any point^^H^t^^uva^Hat^g^^exStSi^cooic^^^W^^Jr 


3° : 

Tl f; 


rdPress.org secret-key service} 
force all users to have to log in again. 


' define (’ AUTH_KEY 1 , 

’put 

your unique phrase here’) 


define ( » SECURE_ADTH_KEY ’ , 

’put 

your unique phrase here’) 


define ( ’ LOGGE D_IN_KE Y ’ , 

’put 

your unique phrase here ’ ) 

; 

define ( * NONCEKEY ’ , 

’put 

your unique phrase here’) 


define ( 1 AUTH_SALT * , 

’put 

your unique phrase here’) 


define ( ’ SECURE_AUTH_SALT ’ , 

’put 

your unique phrase here ’ ) 


define ( ’ LOGGED_IN_SALT ’ , 

’put 

your unique phrase here’} 


define (’NONCE SALT’, 

’put 

your unique phrase here’) 

'* 4 


Copy the above link and open the link 
within a new page in the internet 
browser. Replace the code with the 
newly generated code... 
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Closer look: 


.7 
.8 
.9 
>0 
>1 
>2 
>3 
>4 
>5 
1 6 
>7 
>8 
>9 

50 

51 

52 

53 

54 


// ** MySQL settings - You can get this info from your web host ** // 

/** The name of the database for WordPress */ 

define ( ' DB_NAME ' , ' 8 943 jms8u2 309vk j s82 7u j ' ) ; Database Name 

/** MySQL database username */ 

define ( ' db_user ' , 'root'); Databse Username 
/** MySQL database password */ 

define ( ' db_pas sword ' , 1 ' ) ; Database Password 

/** MySQL hostname */ 

define ( ' DB_HOST ' , ' localhost ' ) ; 

/** Database Charset to use in creating database tables. */ 
define ( ' DB_CHARSET ' , ' utf 8 ' ) ; 

/** The Database Collate type. Don't change this if in doubt. */ 
define ( ' DB_COLLATE ' , ' ' ) ; 

Type within the " brackets 


The last step is to replace the code: 


39 

40 

41 

42 

43 

44 

45 

46 

47 

48 

49 

50 

51 

52 


* Change these to different unique phrases ! 

* You can generate these using the {@link https : //api .wordpress . org/secret-key/1 . l/salt/| WordPress.org secret-key service} 

* You can change these at any point in time to invalidate all existing cookies. This will force all users to have to log in again. 


* @since 2.6.0 
*/ 

define ( ' AUTH_KEY ' , 
define ( ' SECURE_AUTH_KEY ' , 
define ( * L0GGED_IN_KEY ' , 
define ( ' N0NCE_KEY ' , 
define ( ' AUTH_SALT ' , 
define ( ' S E CURE_AUTH_S ALT ' , 
define ( ' LOGGED_IN_SALT ' , 
define ( ' NONCE_SALT ' , 


'put your unique phrase here') 
'put your unique phrase here') 
'put your unique phrase here') 
'put your unique phrase here') 
'put your unique phrase here') 
'put your unique phrase here') 
'put your unique phrase here') 
'put your unique phrase here') 


Copy the above link to a new browser page to generate new code. 
After the code is generated, paste the new code over the default 
code. 

This will help with security! 


* Chancre these to different uniaue ohrases ! 

* You can generate these 

using 

the 

{ @link |https : //api .wordpress . org/secret-key/1 . 1/sa! 

1. y! 

* You can change these at 

any point 

in time to invalidate all existing cookies. This \ 

C c °p~Q 

* @since 2.6.0 






Delete 

*/ 






Select All 

define ( ' AUTH KEY ' , 

'put 

your 

unique 

phrase 

here ' ) ; 

Using 1st Style 

define ( ' SECURE_AUTH_KEY ' , 

'put 

your 

unique 

phrase 

here ' ) ; 

Using 2nd Style 
Using 3rd Style 

define ( ' LOGGED_IN_KEY ' , 

'put 

your 

unique 

phrase 

here ' ) ; 

Using 4th Style 

define ( ' N0NCE_KEY ' , 

'put 

your 

unique 

phrase 

here ' ) ; 

Using 5th Style 

define ( ' AUTH_SALT ' , 

'put 

your 

unique 

phrase 

here ' ) ; 

Clear 1st Style 

define ( ' SECURE_AUTH_SALT ' , 

'put 

your 

unique 

phrase 

here ' ) ; 

Clear 2nd Style 

define ( ' LOGGED_IN_SALT ' , 

'put 

your 

unique 

phrase 

here ' ) ; 

Clear 3rd Style 

define ( ' NONCE_SALT ' , 

'put 

your 

unique 

phrase 

here ' ) ; 

Clear 4th Style 
Clear 5th Style 


Moziila Fi refox 

File Edit View History Bookmarks Tools Help 
^ localhost / localhost | phpMyAdmin [ j http s://a p i, wo rd p re.,, c ret- key/1. 1/salt/ 


A fl 


https:// a pi .word press, org/secret- key/1 ,1/sa It J 


Most Visited Getting Started ??• Latest Headlines 



define ( 'AUTHKEY' , 
define ( 1 SECUEE_AUTH_KEY ' , 
define ( ' LOGGED_IN_KEY' , 
define ( 1 NONCE_KEY 1 , 
define ( 1 ADTH_5ALT 1 , 
define ( ' SE CUEEAUTHS ALT ' 
define ( ' LOGGE D_IN_S ALT ' , 
define ( ' NONCE SALT 1 r 


' Oy | r _MYU>k,Se VcJUq2t?Vh?uW, @W+_wivvXK%30vTp] (dHJ+i?eB{fT EJXAvO' ) ; 
■ _ A * / Fz ! M | y f 0 -K2 Jf + j ou+TE \ : ib 1G1 F , 3B4 Pkr 3 qTMf Jc Juk=y ^ $ cQNWEQ_/_ 1 ) ; 
' =-huXi z - gr s > ) CLllCKbNFeupcZO; <pqf FZ; +KYkZ95C] LpEQRs SHH1 +GXRZYt^m ' ) ; 
1 Lf . 0 ; WO%X% { +-ZyQc2YX \ T ( p4Y{=hAa<07o#- k eOMeOuri A:uK#3t4@VK,m| w 1 ) ; 
■ H+7 c ?Oti @ r_JUKF& 9 #M70- > : hDe 5 # 7 $ ! : - ; dM/ * G+ ! +vl VI »5 i 1 ZMXYi g@ wFpsf 1 ) ; 
1 w4 ' ' ~ ; -N) m . yDNKOEX JH | Rin0mI5S . =3z . ) dO ) 6s/ . } . at { ! uM4mC5U+Y; *Z/ ! ' ) ; 
■E-_3XyZd>@ 1 1] r] jQ7 . ! f+$H+ >) Z [ TwlL9w< 0=xh6 PWTcnRxn ( } F7WFJQ%gz7/^ 1 } ; 
■cIx4FU+^QpuiT@G++|i£ =OT) $SEWrzkpt+Uo] ;L $cX fc pt : | N@TuG0 ; MP- QOZV' ) ; 


Delete 
Select All 


Paste the link in the browser, wait a few seconds.. The new code 
was generated. Copy the code again and replace the default code 
within the wp-config file. 
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Copy the text as shown and replace: 


& Mozilla H refox 
File Edit View History Bookmarks Tools Help 



localh ost / localhost | p h p MyAd min... j j https://a p i .wo rd p re. . . c ret- key/1 .1/sa It/ x 


' A http s :/7a p i . wo rd p ress. org/s ec ret- key/1 .1/sa It/ 


{£' Most Visited Getting Started S Latest Headlines 


define ( 1 AUTH_KEY 1 , 
define ( ■ 5 E CURE_AUT H_KE Y 1 , 
define ( 1 LDGGED_IN_KEY 1 , 
define ( 1 NONCE_KEY‘ , 
define ( 1 AUTH_5ALT 1 , 
define ( 1 S E CURE_MJTH_S ALT ■ , 
define ( 1 LOGGE D_IN_5 ALT ■ , 
define ( 'NONCE SALT', 


' Oy | ,_MYU>k, Se v /cJUq2t ?Vti?uW, 0W+_wiwXK%3QvTp] (dHJ+i?eE{fT E}XAvG ' ) 
' _^*/Fz ! M | yf 0-K2 Jf+j on+TB || : lb 1G1F, 3E4PJcr3qTMf JcJuk=y^$cQNWBQ_/_ ■ ) 
' =- huXl z - gr s > ) CL1 1 CKbNFe upcZ 0 ; <pqf FZ ; +KYkZ 9 5 C ] LpE QRs 5 HH1 +GXRZ Yb^m ' } 
■ Lf . 0 ; WO%X% { +- Z y 0 c2 YX | T ( ' p4 Y { =hAa< 0 7 o# - ' 60Me Our i A : uK# 3 £ 4 0 VK , m j w ■ J 
' H+7 c ?Ub0 r_ JUKF £ 9 #M7 O- } : hDe 5 # 7 $ ! : - ; dM/ * G+ ! +vl VI »5 i 1 ZMXVi g0wFpxf ' } 
1 w4 A ; -N} m. Q$yUNKOHXJH J RmOmlSS . =3z . ) dQ } 6s/ . ) . at{ ! uM4mC5U+Y; *Z/ 3 1 ) 
' E-_6XyZd>0 1 1 ] r J jQ7 . ! f +$H+ >} Z [TwlL9w<0=xh6FWTciiRxn ( ) F7WFJQ%gz7/' i ' } 
, cIx4FO+^Qp-uiT0G++|m =OT) $5EWrzkpt+Uo] ;L $cX* pt : | N0TuGO ;MP- QOZV' ) 


Select All 



Search Google for "define['AUTH_KE.., 
View Selection Source 

Inspect Element £0] 

^0 Download with IDM 
^ Download all links with IDM 

Inspect Element with Firebug 


Go back to the wp-config file and replace the default code: 


define ( ' DB_USER f r ' root ' ] ; 

Cut 

/** MySQL database password */ 


| Paste | 

define ( 1 DB_PAS SWORD 1 , 1 1 ] ; 

Delete 


Select All 

/** MySQL hostname */ 


define ( ' DB HOST ' r 1 localhost ' ) ; 

Using 1st Style 


Using 2nd Style 

/** Database Charset to use in creating database tables. * 

Using 3rd Style 

define ( 1 DB_ CHARSET ' f ' utf 8 ' } ; 

Using 4th Style 


Using 5th Style 

/** The Database Collate type. Don't change this if in dou 

Clear 1st Style 

define ( ' DB_C OLL ATE ' , 1 r ) ; 

Clear 2nd Style 


Clear 3rd Style 

/**#©+ 

Clear 4th Style 

* Authentication Unique Keys and Salts . 

Clear 5th Style 

■k 

Clear all Styles 

* Change these to different unique phrases ! 

UPPERCASE 

* You can generate these using the { Blink https://api.wor 

lowercase 

* You can change these at any point in time to invalidate 


-k 

Toggle Block Comment 

* @ since 2.6.0 

Stream Comment 

-k f 

Hide Lines 


define ( 1 AUTH KEY ’ , 
define ( ’ SECURE_AUTH_KEY 1 , 
define ( 1 LOGGE DINKEY 1 , 
define ( ’ NONCE_KEY' j. 
define ( ’ AUTH_SALT ' , 
define ( 1 SECURE_AUTH_SALT ’ , 
define ( * LOGGED_INI_SALT ’ , 
define ( ’NONCE SALT’, 


' put 

your 

unique 

phrase 

here 1 } 

'put 

your 

unique 

phrase 

here 1 } 

1 put 

your 

unique 

phrase 

here 1 } 

'put 

your 

unique 

phrase 

here 1 } 

'put 

your 

unique 

phrase 

here 1 } 

' put 

your 

unique 

phrase 

here 1 ) 

'put 

your 

unique 

phrase 

here 1 } 





1 } 
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It should look like this when you are done: 


17 

18 

19 

20 


I // ** MySQL settings - You can get this info from your web host ** // 

/** rvF -t-h^ riatahaqp fnr HnrHPrpi;q */ 


26 

27 

28 

29 

30 

31 

32 

33 

34 

35 

36 

37 

38 

39 

40 

41 

42 

43 

44 

45 

46 

47 

48 

49 

50 

51 

52 


define ( * DB_NAME ' , * 8943 jms8u2309vkjs827uj ' ) ; I Done 


21 

1 /** M\/SnT. 

ii qp rn 

22 

1 define ( ' DB_USER ' , ' 


23 



24 

/** MySQL database 

password 

25 

define ( ' DB_PASSWORD ' , ' • ) ; | [ 


This is all the changes needed for the wp-config.php file. The 
same process will apply for every new website. 


/** MySQL hostname */ 

define (' DB_HOST ' , ' localhost ' ) ; 

/** Database Charset to use in creating database tables. */ 
define ( ' DB_CHARSET ' , ' utf 8 ' ) ; 

/** The Database Collate type. Don't change this if in doubt. */ 
define ( ' DB_COLLATE ' , ' ' ) ; 

/**# 0 + 

* Authentication Unique Keys and Salts. 

* Change these to different unique phrases ! 

* You can generate these using the {@link https : //api . wordpress . org/secret-key/1 . 1/salt/ WordPress.org secret-key service} 

* You can change these at any point in time to invalidate all existing cookies. This will force all users to have to log in again. 

* ©since 2.6.0 




define ( ' AUTH_KEY • , 
define ( * SECURE_AUTH_KEY ' , 
define ( * LOGGED_IN_KEY * , 
define ( ' NONCE_KEY ' , 
define ( ' AUTH_SALT ' , 
define ( * SECURE_AUTH_SALT * 
define ( * LOGGED_IN_SALT 1 , 
define ( * N0NCE_SALT * , 


' Oy | , _MYU>k, Se ' / cJUq2t?Vh?uW, @W+_wiwXK%30vTp] (dHJ+i?eB { fT ' E }XAvO • ) ; 
, _ / '*/Fz ! M | yfO-K2 Jf+j ou+TB | : ib 1G1F, 3B4Pkr3qTMf JcJuk=y A $cQNWBQ_/_’ ) ; 
1 =-huXlz-grs» CLllCKbNFeupcZO; <pqf FZ; +KYkZ95C] LpEQRsSHHl+CXRZYb=m' ) ; 
' Lf . 0; WO%X% { H — Zy0c2 YX I T ( ' p4 Y{=hAa<07o#- ' 60Me0uri A: uK#3&40VK, m | w ’ ) ; 
' H+7c?Ub0r_JUKF&9#M7O- } :hDe5#7$ ! dM/*G+ ! +vIVI»5ilZMXVig@wFpxf ' ) ; 
' w4 ' -N)m.Q$yUNK0HXJH|Rm0ml5S.=3z.)d0) 6s/.) .at{ ! uM4mC5U+Y; *Z/ ! ') ; 
' E~_8XyZd>@ 1 1] r] jQ7 . ! f+$H+ >) Z [TwlL9w<0=xh6PWTcuRxn ( ) F7WFJQ%gz7/ A ' ) ; 
' c!x4FU+ / 'QpuiT@G++ |m_=OT) $SEWrzkpt+Uo] ;L $cX*_pt: |N0TuGO;MP- QOZV'); 


Done 


For now this is all the editing that will be done. The next step is to run the WordPress installation for the first time. 

Recap of what you did so far: 

• You have downloaded all the necessary files and documents to setup your own website. 

WAMP | WordPress | Notepad++ 

• You have created a text file to capture and save all the relevant information needed for the website. 

• You installed WAMP server and configured it. 

• You have moved the WordPress files within the correct folder on your PC for offline usage. 

• You have created a database for your website. 

• You have renamed and edited the wp-config WordPress file to find the database. 


[Back to Topi 
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Installing WordPress for first use 

You've done a lot of steps, now all that needs to be done is to install WordPress. If you followed the steps above, 
WordPress will pick up the database and you can proceed with installation. Remember your text file, you will need it 
now. 


Take note: 


To access the server on a local pc with WAMP installed, you can either type in the address (localhost) or use the shortcut 
within the WAMP tree view. 



Click on the green 'W' icon within the system tray. Now select Localhost. 


[Localhost - Once you click on localhost the internet browser will open. This will read the 'www' 
folder and all files within it. See it as the online version of the web, except its offline :-) with the help 
of WAMP.] 


B r* o i* 


3docean 

Awesome Stock 3D 

Start Browsing 

^activeden 

Your Choice for 
Stock Flash 

. 3 audiojungle 

Music Loops 
and Sound Effects 

Start Browsing 

Start Browsing 

fi codecanyon 

1 00s of Scripts 
and Snippets 

\,| 

•T/ 

graphicriver 

1 000s of Graphic Files 

« photodune 

Your Choice for 
Stock Photos 

Start Browsing 

Start Browsing 

Start Browsing 




\ 

themeforest 

lOOOsof 
Site Templates 

* tutorials 

Premium Tutorials 
and Screencasts 

videohive 

1 00s of Video Files 

Start Browsing 

Start Browsing 

Start Browsing 
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The following window will be shown: http://localhost 



WordPress 


Welcome 

Welcome to the famous five minute WordPress installation process! You may want to browse the ReadMe 
documentation at your leisure. Otherwise, just fill in the information below and you'll be on your way to using 
the most extendable and powerful personal publishing platform in the world. 


Information needed 


Please provide the following information. Don't worry you can always change these settings later. 


Site Title 


Username 

Usernames can have only alphanumeric characters, spaces, underscores, hyphens, periods and the 
■Si! symbol. 

Password, twice 

A password will be 
automatically generated 
for you if you leave th is 
blank. 

Hint: The password should be at least seven characters long. To make it stronger, use upper and 
lower case letters, numbers and symbols like ! “ ? S % A & ). 


Strength indicator 


admin 


Your E-mail 


Double-check your email address before continuing. 


Privacy 


0 Allow search engines to index this site. 


Install WordPress 


Open your text file now and enter the following information! 

• Link to Backend - Only use after installation! 

• The Site Title 

• Username: 

• Password: 

• Email used 

• Select to index or not. 
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Please provide the following information. Don't worry, you cai 
Site Title 


mydomainnarne.co.za details - Notepad 






File Edit Format View Help 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - text file - xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx > 
xxxxxxxxxxxxxxxxxx - Site Title & Log-in information | Email - xxxxxxxxxxxxxxxxxxxxxxxx: 
Email used: infod4nydomain.co.za 


Username 


admin 

Usernames can have only alphanumeric cTu 
@ symbol 


My First Offline website 

Username: hdten@kchms_mjsklshjk@nmdkkmdn74793@84kd 

Password: 89Mo: :0893yjmLP{ :D943j ,kOl(DK300lc"{}P{)_89ju34 

Database Name: 8943jms8u2309vkjs827uj 

Database username: Not needed for offline version! 

Database Password: Not needed for offline version! 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 


Password, twice 

A password will be 
automatically generated 
for you if you leave this 
blank 


Enter Backend: http://localhost/wp-admin 


Strength indicator 

Hint The password should be at least sever 
lower case letters, numbers and symbols like 


Site Title: My First website| 

Username : h462n27@-m885 jthdjdf@jcjf@jf jdf 5676er 

Password: HUJD7u4f j499>" :0 — (1 ; 3. ./pcoOi39. ./P)i9k3d 

Email Used: info@mydomain. co. za 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 


Your E-mail 


Double-check your email address before 001 


Privacy 


® Allow search engines to index 1 1 


Install WordPress ' 

r 


Fill out the form by copying and pasting the text. 


Welcome 


Welcome to the famous five minute WordPress installation process! You may want to browse the Read Me 
documentation at your leisure. Otherwise, just fill in the information below and you'll be on your way to using the 
most extendable and powerful personal publishing platform in the world. 


Information needed 


Please provide the following information. Don't worry, you can always change these settings later. 


S ite ntl e My F i rst We b s ite 

Never ever use "Admin"!!! 

Usernames can have only alphanumeric characters, spaces, underscores, hyphens, periods and the @ 
symbol. 

Password, twice 

A password will be 
automatically generated for 
you if you leave this blank. 


Hint: The password should he at least seven characters long. To make it stronger, use upper and lower 
case letters, numbers and symbols like ! ■ ? 5 % * & ). 

Your E-mail info@mydomain.co.za 

Double-check your email address before continuing. 


Strong 



Privacy 


ffl Allow search engines to index this site. 


Install WordPress 


Click Install WordPress once done. 
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Click Install WordPress. Once done the following window will appear. (Sometimes this window doesn't show, just click 
on refresh page and it will show WordPress already installed.) 


WordPress 

Success! 

WordPress has been installed. Were you expecting more steps? Sorry to disappoint. 
Username h462n27@m885jthdjdf@jcjf@jfjdf5676er 

Password your chosen password. 

Log In 



When the installation is done, select Log In. 

The page will redirect to a page that looks like this: 


WordPress 

Username 

Enter Username 

Password 

Enter Password 


Log In 


LoAt^ou.rjAssword? 

<- Back to Mv First Website 



This is the main Log In page to the backend of your website. The backend is the place where all the editing takes place. 


The link to this page is: http://localhost/wp-admin 



WordPress 


Username 

jthdjdf@jcjf@jfjdf5676er 


Password 

□ Remember Me 

Lost vour password? 

<- Back to Mv First Website 


Log In 


| mydomainname.co.za details - Notepad l 1=1 BEMI 


File Edit Format View Help 



xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - text file - xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx y 
xxxxxxxxxxxxxxxxxx - site Title & Log-in information | Email - xxxxxxxxxxxxxxxxxxxxxxxx: 
Email used: i nfo@mydomai n. co. za 


My First offline website 

username : hdten@kchms_mjskl shjk@nmdkkmdn74793@84kd 

Password : 89Mo: : 0893yj.mLP-[ : D943j , kOl(DK300l c s, {}P{)_89 ju34 

Database Name: 8943jms8u2309vkjs827uj 

Database username: Not needed for offline version! 

Database Password: Not needed for offline version! 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
Enter Backend: http : //local host/wp-admi n 


site Title: My First website 

Username : h462n27@m885jthdjdf@jcjf@jf jdf 5676er 

Passwor d : 

Email used: info@mydomain.co.za 


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 

Enter the username and password as saved. 

Click on Log In. This will take you to the backend of 
the website where editing takes place. 
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Congratulations! 

You made your first website - but you are not done yet! 


Dashboard < My First Website — WordPress - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 
BTjPashboard < My First Website — WordPr... | + | 

^ ® localhost/wp-admin/ 

@i Most Visited L3 Getting Started [Sill Latest Headline 


C >11* Google 


_P * 


Updates 0 

Posts 

Media 

Pages 

<&) Comments 
g Appearance 
Plugins © 
Users 
TJ Tools 
[Wj Settings 


Dashboard 


This is the Backend of Your Website - All Editing Takes Place Here! 


sn Options * Help » 


Welcome to WordPress! 

We've assembled some links to get you started: 


>r. change your theme completely 


P Write your first blog post 
g> Add an About page 
S View your site 


Right Now 

Content 


1 Category 


Discussion 
1 Comment 
1 Approved 
O Pending 


Theme Twenty Twelve with 6 Widgets 

You are using WordPress 3.5. Nothing jS added but SampleS.. 

Recent Comments 


n 


From Mr WordPress on Hello world! # 

Hi, this is a comment. To delete a comment, just tog in and vk 


lie posts comments. There you w 


More Actions 

S Manage widgets or menus 
© Turn comments on or off 
f» Learn more about getting started 


Read or dismiss for now. 


Save Draft Reset 


Recent Drafts 

There are no drafts at the mi 


All | Pending (0) | Approved | Spam I Trash (0) 

Incoming Links 

Catur Prasongko linked here saying, *(if It E 9]> <script src="http://html5 ..." 

*_* linked here saying, "A maioria das distribuifoes GNU/Linux disponibiliz ..." 

Perpusarda Kebumen linked here saying, 'Caranya Ketikkan http://localhost/phpmyadmin lalu ..." 
Autumn linked here saying, Image Should there is no backup host files in your ..." 

Matanya linked here saying, "Working on a new project in Laravel 4 (a.k.a Ilium ..." 
userl 947562 linked here savJna. "Location -> <soao:address location='ht ..." 


WordPress Blog 

2012 : A Look Back January 1, 2013 

Another year is coming to a dose, and it's time to took back and reflect on what we've accomplished in the past twelve months. The WordPress community is stronger than 
ever, and some of the accomplishments of the past year are definitely worth remembering. Software Releases We had two major releases of the WordPress web [...] 

WordPress 3.5 “Svin” December 11 , 2012 

It’s the most wonderful time of the year: a new WordPress release is available and chock-ful of goodies to delight bloggers and developers alke. We’re calling this one ■Ehrin" in 
honor of drummer Etvin Jones, who played with John Coltrane in addition to many others. If you've been around WordPress e while, the most dramatic [...] 


Other WordPress News 


0 ) Dashboard 4 My First Website — WordPress - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


J Dashboard < My First Website — WordPr... 


«■ ® 1 0 c a I h 0 st/wp -admin/ 


P Most Visited Getting Started i*|i Latest Headlines 



Home 
Updates Q 

Posts 
Ggj| Media 
g Pages 
@ Comments 
g Appearance 
0 ? Plugins 0 
Users 

TJ Iools 

[M] Settings 

■4 Collapse menu 


Welcome to WordPress! 

WeVe assembled some links to get you st 

Get Started 


Customize Your Site 


or, change vourtheme completely 

Right Now 

Content 


To view your website, click on Visit Site. Open the link in a new tab 
by right clicking and selecting 'open in new tab' or by clicking the 
mouse wheel. 

It will look like this: 


My First Website 


Just another WordPress site 


HOME SAMPLE PAGE 


Hello world! 

Search 

1 Reply 


Welcome to WordPress. This is your first post. Edit or delete it, then start blogging! 

RECENT POSTS 

This entrv was Dosted in Uncateeorized on lanuarv 7. 2013. Edit 

Hello world! 


RECENT COMMENTS 


Mr WordPress on Hello world! 

Your Website! 

ARCHIVES 

lanuarv 2013 


CATEGORIES 


Uncateeorized 


META 


Site Admin 
Logout 
Entries RSS 
Comments RSS 
WordPress.ore 

Proudlv Dowered bv WordPress 
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Changing Important WordPress Settings Before Use 

You installed WordPress on a local PC running WAMP. It's time to start editing the website settings before you use the 
website. 

Changing Settings Part 1: 

Users: Your Profile 

Remember the Username you entered - "h462n27@m885jthdjdf@jcjf@jfjdf5676er". 

As shown in the picture below, everyone will see this. This is not good practise as the visitors will also see this username. 
(It's also easy information for hackers). 


0 ” Google 


P ft 




H owdy, h462 n2 7 @ m 8 8 5jthdjdf@jcjf@jfjdf56 76er 


Screen Options Help 

Username Must Change to Nickname! 


On the left pane within the backend of WordPress. Go to Users, and then to Your Profile. Enter a Nickname within the 
field and select the name from the "Display name publicly as ." 

Profile . My First Website — WordPress x | [ j My First Website | Just another Word... ( + | 
local hostr'wp-admin/profile.php 


(P[i Most Visited [..] Getting Started ^ Latest Headlines 


© My First Website 


Dashboard 
Posts 
(jjfo Media 
[£] Pages 
Comments 
|g] Appearance 
£& Plugins 


! Profile 

Personal Options 

Visual Editor 
Admin Color Scheme 


» 


All Users 
Add New 

Ti Tools 
(H) Settings 

V Collapse menu 


Keyboard Shortcuts 
Toolbar 

Name 

Username 
First Name 
Last Name 
Nickname (required) 
Display name publicly as 
Contact Info 


"Enter a Nickname" 

E3 Disable the visual editor when writing 

© Blue 

• Gray 

fH Enable keyboard shortcuts for comment moderation. More informatio 
|y) Show Toolbar when viewing site 


c 


h462n 2 7@m885jthdjdf@jcjf@jfjdfi 6 76er 


h462n27@m885jthdjdf@jcjf@j^df5 6 76er] 


Usernames ca 


3 


h462n27@m8 8 5jthdjdf@jcjf<^] 

Choose the name entered and select Update Profile at the bottom of the page. 


Last Name 


Nickname (jnegfuirndJ Website Administrator 


Display name publicly as 

Website Administrator [▼] 


h4 62 n2 7 @ m 8 8 5jt hdjdf@jcjf@jfjdfS 6 7 6 e r 1 

Contact Info 

Website Administrator | 
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When viewing the website, the original username will not be shown anymore, but only the nickname. 

This is the name you entered to be displayed as the nickname. 

| H owdy, Website Ad m i n i strator | | 

Website Administrator 

h 4 6 2 n 2 7 in S 8 5 jth dj dfj cjfjfj df 5 8 7 S e r 

I ■ Edit My Profile 

Log Out 


Visual Editor 

Ad m i n Color Scheme 


Keyboard Shortcuts 
Toolbar 
Name 


□ 

© 

© 

□ 

m 


Disable the visual editor when writing 
Blue 



Ena ble keyboard shortcuts for com ment moderation . More i nfor motion 
Show Toolbar when viewing site 




Username 
First Name 
Last Name 
Nickname rregufred^ 
Display name publicly as 
Contact Info 
E-mail (required) 

Website 

AIM 

Yahoo IM 

Ja b ber f Goog le Ta Ik 
About Yourself 
Biographical Info 


New Password 


Usernames cannot be changed. 

You can enter the other information as 
well. 

Name | Last Name | Website | AIM | 
Yahoo IM | Google etc. 

About Yourself will be displayed after a 
post made by you. 

Password: The password for WordPress 
can also be changed from User Profile. 


Share a Mtfe biographical information io fiit out your profile. This maybe afro™ publicly 

If you would tike to change the password type a new one. Otherwise leave this blank. 

Type your new password again. 

Strength i nd icator Hint The password should be at least seven characters long. To make it stronger, use upper and lower case letters;, numbers and syrnfro/s like !’?$%*&}. 


h4S2n27'@mE£5jthdjdf@jcjf@jfjdf5e7f3er 


Website Admin istrator 
Website Ad m i n istrator | T | 


i nfo@mydoma i n .co.za 


Note: Remember to save all information entered and changed. 
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Changing Settings Part 2: 

Settings: General | Writing | Reading | Discussion | Media & Permalinks 
General Settings 


{£} Dashboard 
fS" Posts 


m 


General Settings 


1% Media 


Site Title 


My First Website The Main Title of The Website 


£] Pages 
Comments 
§ Appearance 


0} Plugins 
(jO, Users 
is Tools 



f^enera^ 

Writing 


Reading 

Discussion 

Media 

Permalinks 


Tagline 

WordPress Address (URL) 
Site Address (URL) 

E-mail Address 

Membership 

New User Default Role 

Timezone 


Just another WordPress site Tagline - Shown After Title 

In a few words, explain what this site is about 

h tt P : / /locaihos* offline Path 
http : //locaihos- offline Path 

info@mydomain.co.za Website Administrator Email! 

This address is used tor admin purposes, like new user notification. 

Leave Unchecked for Now as only 
you will be admin 

|^] UTCtimeis 2013-01-07 12: S3: 40 

Choose a city in the same timezone as you. 


\ 

Z Anyone can register 
Subscriber [V| 
UTC+0 


Note: 

When moving the website online, both these links will 
change to: 

h ttp:// www. yourdomainname. co. za 


Date Format 


© 

© 

© 

© 


January 7, 2013 
2013/01/07 
01/07/2013 
07/01/2013 
Custom: Fj,Y 


January 7, 2013 


Documentation on date and time formatting . 


Week Starts On 



@12:53 pm 
© 12:53 PM 
©12:53 

© Custom: ffi a 12:53 pm 
Monday Q 


Writing Settings 



Reading 


Reading Settings < My First Website — WordPress - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 
: Reading Settings < My First Website ... x [ My First Website | Just another Word... | + | 
^ ttj local host .vp-admin/options- reading. php 
Hii Most Visited [J Getting Started |&ji Latest Headlines 


{j} Dashboard 
Posts 
C|j] Media 
10 Pages 
Comments 
§ Appearance 
0} Plugins 
IQ Users 
'J'J Tools 


I Reading Settings 


Front page displays 


Blog pages show at most 


Your latest posts Display Post as Homepage 

static paoe (select below) 

Frontpage: -select- Website with a Home Page 

Postspage Select— Blog Pages 

10 posts 100 Posts - 10 Posts per page x 10 Pages 

10 items rss Feeds 


General 

Writing 

Reading 

Discussion 

Media 

Permalinks 


For each article in a feed, show 


Search Engine Visibility 


@ Full text 
© Summary 


{j^ scourage search engines from indexing this site MUStthe Website be indexed Of not. 

It is up to search engines to honor this request 


Leave: 

Checked: Will Not be indexed. 

Unchecked: Will BE indexed. 
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Discussion 


Discuss or Settings < My First Website — WordPress - Mozilla Firefcx '^1 

File Edit View History Bookmarks lools Help 
■ Cj Discussion Settings < My First Website... x | [j My First Website | Just another Word... j + j 


^ & localhost/wp-admin/options-discussion.php 


r " g|[a- Google 


@1 Most Visited L] Getting Started Latest Headlines 


| T? Discussion Settings 



[y| Attempt to notify any blogs linked to from the article 
|y| Allow link notifications from other blogs (pingbadts ai 
[y| Allow people to 


[y| Comment author must fill out name and « 

[H] Users must be registered and logged in to 
|p| Automatical ly dose comments on artides older than 14 days 

[y| Enable threaded (nested) comments 5 [2 levels deep 

IF*! Break comments into pages with 50 top level comments per page and the last [3 page displayed by dr 

Comments should be displayed with the older [^] comments at the top of each page 

[y| Anyone posts a comment 


Iways approve the comment Consider this option to prevent unwanted comments. 

lave a previously approved a 


administi 
[y] Comment ai 


contains any of these wi 


2 or more links. (A common charaderisticof comment spam is a large number of hyperlinks.) 

Is in its content, name. URL. e-mail, or IP. it will be held in the moderation queue . One word or IP per line. It will match inside words, sc 


Comment Bladdist 


a comment contains any of these wx 


ar Display 


Default Avatar 


>u from weblog to weblog appearing beside your name when you oomment on avatar enabled sites. Here you can enable the display of avatars for people who comment on your site. 

[y] Show Avatars 

@ G — Suitable for all audienoes 

© PG — Possibly offensive, usually for audiences 1 3 and above 
© R — Intended for adult audiences above 17 
© X — Even more mature than above 

For users without a custom avatar of their own. you can either display a generic logo or a generated one based on their e-mail address. 

@1 (j Mystery Man 
© Blank 

Gravatar Logo Create a Gravatar Account - Display Your Own Photot Across the Web - https://en.gravatar.com/ 

Identicon (Generated) 
o© Wavatar (Generated) 

MonsterlD (Generated) 

0 Retro (Generated) 


Media 


Media Settings < My First Website — WordPress - Mozilla Firefox^ 
File Edit View History Bookmarks loots Help 


1 [ j Media Settings < My First Website — ... x [~[ J My First Website | Just another Word... Gravatar - Globally Recognized Avatars | + J 

^ ® localhost/wp-admin/options-media.php 

Most Visited [.J Getting Started |^i Latest Headlines 


(J} Dashboard 
jS> Posts 
Media 
C Pages 
<js> Comments 
jr~| Appearance 
0> Plugins 
^Users 
tJ Tools 


Media 


m Media Settings 

Image sizes 

The sizes listed below determini 


le maximum dimensions in pixels to use when inserting an image into the body of a post. 


150 Height 150 
»p thumbnail to e 


Uploading Files 

[y| Organize my uploads in 


(normally thumbnails ai 

300 Max Height 300 

1024 Max Height 1024 


id year-based folders 


Folder will be created with the filename 'Uploads' 
Filepath: wp-content/uploads 
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Permalinks 


^ Permalink Settings < My First Website — WordPress - Mozilla Firefox^ 
File Edit View History Bookmarks lools Help 


[_] Permalink Settings < My First Website ... x | [ J My First Website | Ju st another Word... •< | (3 Gra vatar - Global ly Recognized Avatars <~| + | 


& localhost/wp-admin/options-permalink.php 


l^i Most Visited [_j Getting Started 3 Latest Headlines 


My First Website 


Dashboard 
£> Posts 
Media 
C Pages 
£) Comments 

H) Appearance 
$ Plugins 
Users 

T! Tools 

Pt| 


General 

Writing 

Reading 

Discussion 

Media 

Permalinks 

<) Collapse menu 



TT Permalink Settings 


By default WordPress uses web URLs which have question marks and lots of numbers in them, however WordPress offers you the ability to create a custom URL structure for yc 
of tags are available , and here are some examples to get you started. 

Common Settings 

(«> Default 
© Day and name 
© Month and name 
© Numeric 
© Post name 
© Custom Structure 
Optional 


http://localhost/?p=123 

http ://localhost/2013/01/08/ sample- post/ 

http://localhost/2013/01/sample-post/ 

http://localhost/archives/123 

http : //localhost/sample- post/ 

http://localhost 


If you like, you may enter custom structures for your category and tag URLs here. For example, using topics as your category base would make your category links like http 
Category base 
Tag base 


Save Changes 


Please Note: 

For offline mode only! - Keep default as some posts won't show with other settings. 
For online: Choose any structure but remember to test all post & pages. 


[Back to Topi 
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Adding Content to the Website 

Now that all the necessary settings are changed, it's time to add some content in the form of pages and posts. 


Dashboard 

Posts 
C°Jj Media 
[P Pages 
^ Comments 

HQ) Appearance 
0 Plugins 
^ Users 
TJ Tools 


^ Settings 


General 

Writing 

Reading 

Discussion 

Media 

Permalinks 


A Quick overview of the left pane: 

The Dashboard: Shows Stats & Overall Information about your website as well as shortcuts. 
Posts: Blog Posts - Writing Articles etc. is a good way of populating the posts/website. 
Media: All uploads -files, music, pictures etc. 

Pages: Website pages like Home, Contact Us, About Us, Products, Terms, Privacy Policy etc. 
Comments: Comments can be left on posts by visitors. 

Appearance: Look of the website - Theme / Widgets / Menu / Header / Background etc. 
Plugins: Extra add-ons for the website like a contact form or captcha codes and more. 

Users: User profile & administrator details. Currently you are the only backend user. 

Tools: Word Press Tools like import & export services as well as other. 

Settings: Already Covered! - General / Writing / Reading / Discussion / Media & Permalinks 


What will be added for the sample website? 

All samples will consist of La urem Ipsum text: http://www. lipsum. com / 

Pages: 

• Home 

• Blog 

• Products 

• About Us 

• Contact Us 

• Privacy Policy 

• Terms & Conditions 

Posts: 

• 5-10 Articles of your own words! Articles are also a good way of implementing SEO to the website which in turn 
gives the website better ranking within the search engines. (Pending quality of posts off course). 
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Adding Pages 

Now that all the necessary settings are changed, it's time to add some content in the form of pages and posts. 


To add pages: On the left pane, click on All Pages or Add New. 


S Most Visited [..] Getting Started Si Latest Headlines 


~ C | SI - Google 


Pages ^ddNe^ To add a new page to the website, go to Pages-Add New 
[am j ^ ^ Currently, the only page published is the "sample page" which will be deleted later. 

Bulk Actions 1 -r Apply Show all dates |T] I Filter 


The Author - Same as 


All Pages 

□ Title 


Author y 


Date 

Add New 

<p) Comments 

[r] Qsample Page 

/The name of the Page 
(Heading) 


o 

2013/01/07 

Published 

Q Appearance 

B Title 


Author 

* 

Date A 

fj& Plugins 
£ Users 
XJ Tools 
gy] Settings 

Bulk Actions [▼] 

Apply 


Date Published 


Once you click Add new the following will be displayed. 


Howdy, Website Administrator | 



<£> Comments 


fj Settings 


Show on seroon Comme nts On/ Off 

[S3 Page Attributes [V] Featured Image □ Custom Fields fc Discussior^ HSIug B Author Who made the pOSt OT page? 

Screen Layout * * 

Number of columns: i 02 Text that appear at the end of a link: 


[ T Add New Page 


http:www.yourdomain.co.za/terms-conditions etc. 


Click on Screen Options to change settings. 

Screen Options » 


§§) Appearance 

[ Home Title of the page 



Publish 


$ Plugins 

Permalink: http://localhost/?pageJd=4 Change Permalinks 


HTML 

Save Draft 

Preview 

^ Users 

Add Media 


WYSIWIG <□ Text 

Status: Draft Edit 


TS Tools 

b i Jink b-quote deJ ins img ul ol li code mi 

3re lookup close tags fullscreen 


Visibility: Public Edit 



Content of the relevant page - Lorem Ipsum for sample! 


ful Publish immediately Edit 
Move to Trash 

Page Attributes 
Parent 

(no parent) g 


Template 


Page Layout 


Word count: 0 


Draft saved at 1:27:33 pm. 


Need help? Use the Help tab in the upper right 
of your screen. 


At the top is the Screen Options. This is pretty much self-explanatory. If selected, the settings will be visible at the 
bottom of the page. Turn comments on or off, show a different author, create a slug or attach a featured image that will 
be displayed at the top of the page. (Front-end - Visible to public.) 

Screen Option Enabled: 


Custom Fields 
Add New Custom Field: 

Name Value 


Add Custom Field 

Custom fields can be used to add extra metadata to a post that you caniy ^ in ypyr thprn?; 


fyf Allow trackball and cnobacks on th,s oaoe Allow/Disallow Comments for this particular post/page. 

Slug 


Enter a slug for this page. 


Author 

website Administrator [*] Choose the author for this post/page. 


Thank you for creating with WordPress 
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Let's add the pages now, do one at a time till finished. Shown here is only the Home & Blog Pages. 

Home Page: 


(2) Dashboard 

|jp Edit Page Add New 


Screen Options » Help » 

^ Posts 



Media 

Page published. View page 



ATI Pages 

Home Added Title to the page 


Publish 

Add New 

Permalink: http://localhosV?page_id=4 Change Permalinks View Page 


Preview Changes 

@ Comments 

Add Media 

Visual Text 

Status: Published Edit 

g Appearance 

b < link b-quote dei ins img ul ol li code more lookup close tags fullscreen 


Visibility: Public Edit 


$ Plugins 
Users 
ti Tools 
Iwl Settings 


Lorem ipsum dolor s 
feugiat. Fusee at u 
gretiuni volutgat. N 


Added Content to the Home Page 

amet, consectetur adigiscing elit. Dp_n.ec eu odio cogsertrtur ni si venenatis gulvinar. 

3 in tellus susci gi t ullancorger. Donee r ho ncus interduni eleifend. Aliguam erat vol utpat ■ Nam lacus a 
: nulla sen, gosuere nee yiverra et, consectetur ac nisi. Phasellus et malesuada dui. 


r ut aliguet a, rhoncus a nibh. Qonec pjLacgrat gorttitor mi id 
, sodales at adigiscing non, ijgerdiet vel nisi . guisgue ultricies 


Sed gharetra, tortor eu adipiscing congue, justo mauris Wandi)t massa, eget dignissiiii sem urna ut eros. eras sit amet mauris negue. Etiam lobortis porttitor diam eu sollicit ud in . Haecjenas luctus, 
odio sed elementum feugiat, gurus est conpirogntum lacus, sit amet euisrood lacus diam in sapien . Vgstibulum ante igsum grimis in faucibus or ci luctus et ul jt ri ces gosue.re. cubilia Curae; ftuisgue 
fripgilla nisi vitae tortor jyollip vitae ejLenigntpm nisi cursus. In eu igsum lacus, yel Iqpqrtis tellus. Nqllqm glejfepd metus pulyinpr dui cppgin)entuq eget guctor ante sodales. phapeljus erp.s mi, 
ull amg orp er a sol 11 ci t ud i n glacerat, fr jLnjgillg in o rci. . In hac hab ita s se. pl ateq d jict ums t . yestibpluni in nigle^uaga eros . F us ee eui smod negue a diam gliquet g el 1 e n t e s c | u e . Cr as ali guet maur is ac 
tortor interpum pgrttijor ejLe.ifgnij mi fg.ygjlat. Agneg.n. nec dui at igsum fgugyat copsequat sed jLuqtus urna. fteqeap aqctpr justo ac rnauris iaculi.s in poljicjLpuqin ligula conyallis. 

Proin vitae to rt or sed orci pprttijbor interdum. In pltricie.s lorem non nulla yjyejrrq id tritstiquq leo semger. Viyamus faqcijpus negue laoregt gurus viyerra id rhoncus ligula lobortis. Viyamus in 
ligula ante. Nullam ac nunc yel augue ullgmcorger iaculis eget eu gurus. Aenean id yolutpat sem. Sed fringilla diam sed fells auctor eget ullamcorger sapien consectetur. Cum sociis natggue ^ 

RSJISEiSilS. & JSICJS dis RSi^ur^eryt montes, nascetur ridiculus mus. Nulla dignissim yulgutate ddjnissim. Selected Front Page Template^^^^ 

Puis tristigue, augue vitae ullanicorger dagibus, negue arcu volutgat gurus, id malesuada nisi urna eu justo. Vestibulum commodo, gurus lobortis lapreet cursus, nisi felis vestibulum tortor, ( 

yenena1:is pulyinar nunc <juam guis velit. Nullam id nulla at massa imjllis porttitor in eu enim. Nulla vitae eleifend sapien. Curabipur et arcu at urpa auctor pellentesque . Maecenas erat guam, 
mo ll .is r e t puly in ar. at, imperdiet id mauris.. Donee, congqe tgrto r nec ante c ur sus semper . Se d nulla to rtor, sagitti.s. eu blandit venenatis, laoreet a justo. Integer nibh guam, eleyigntum id bibgn.dqm 
ut, aliguet sit amet felis. Aenean quis odio id massa placerat tincidunt non in guam. Mauris molestie conse.quat lacus id tincidunt. Mauris et magna dui, sed elementum sem. Nam ultrices nisi nec 


@ Published on: Jan 8, 2013 @13:56 Edit 
Move to Trash 

Page Attributes 

(no parent) [» 



Front Page Template 


Word count 501 


Last edited by Website Administrator on January 8, 2013 at 1:56 pm 


Oaiiow comments Do not want comments on the Home Page 

[V] Allow trackbacks and oinabacks on this page. 


Featured Image 

Set featured image 


Comments 

Add comment 


Blog Page: 


Add New Page < My First Website — WordPress - Mozilla Firefox ^ 

File Edit View History Bookmarks Tools Help 


HrjAdd New Page < My First Websrte — ... x £ Home | My First Website 

localhosb'wp-admin/post-new.php?post_type=page 


x | for Lorem ipsum - All the facts - Lipsum ... j + 


A. 


C ^ Google 


>1 Most Visited LJ Getting Started ^ Latest Headline 



jp Add New Page 


J Title added - Blog 

Permalink: http://localhost/?page_id=6 1 Change Permalinks 
Add Media 


link! b-quote del ins i img : 


code : more | lookup close tags fullscreen 


Leave Empty! 

The Blog will be used for posts. Whenever a post is added it will be posting to the Blog Page. 
Leave comments on for users to give feedback on the posts you make. 


Howdy. Website Administrator | 


Screen Options t Help * 


Publish 
Save Draft 
Status: Draft Edit 
Visibility Public Edit 
[Si] Publish immediately Edit 
Move to Trash 

Page Attributes 
Parent 

(no parent) pal 
Template 
Default Template 


13 


Need help? Use the Help tab in the upper right 

Word count: 0 Draft saved at 2:03:05 pm. of your screen. 

Featured Image 

Set featured image 


Two (2) pages have been added so far, the Home & Blog Pages. Add the rest of the 
pages by following the Home page process, adding a title as well as content. 
Remember, if you want comments to be made, select allow comments or otherwise 
not. 

Create the following pages before moving on. 

• Products 

• About Us 

• Contact Us 

• Privacy Policy 

• Terms & Conditions 


{5} Dashboard 

L Pages Add New 

Al (8) | Published (8) 

L Bulk Actions [V] Apply j 

& Posts 
lj°jj Media 

All Pages 

0 Title 

Add New 

[g About Us 

@ Comments 


§Q Appearance 
0 Plugins 
Users 

t! Tools 

fTYl Settings 

0 Blog 

0 Contact Us 
[p] Home 

® Collapse menu 

|g Privacy Policy 


[g Products 


p] Sample Page 


0 Terms & Conditions 
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Adding Posts 

Posts within Word Press are referred to as Blog Posts or Articles. In the previous lesson you created a blog page with an 
empty content area. Now you will create posts and attached them to the blog page. If you create 10 posts, all will be 
attached to the blog page. When viewing the blog page, the posts will be shown separately within the content area. 


To add posts: On the left pane, click on All Posts or Add new. 


Posts < My First Website — WordPress - Mozilla 
File Edit View History Bookmarks Tools Help 

Posts < My First Website — WordPress >T [ jjj] My First Website | Just another Word... | + | ^ ^ ^ ^ 

localhost/wp-admin/edit.php ff V C * Google 


|p(i Most Visited [..] Getting Started Si Latest Headlines [..] Lorem Ipsum - All the ... 


(^) My First Website # + New 




Dashboard 

^All^ostsJ 

^ POStS [ Add New | 

All (1) | Published (1) 

Bulk Actions g Apply Show all dates |T] View all categories g Filter 

Create a New Category with the 1st Post 

Categories 

Tags 

□ Title 

Author 

r i 

Categories 

Tags 

C|)j Media 

□ Heiio world! Sample post - Default 

Website Administrator 

Uncategorized 


[£] Pages 





<£) Comments 

H Tide 

Author 

Categories 

Tags 


g Appearance Bulk Actions g | Apply Posts belong to the Blog Page! 


Plugins 


^ Users 
Ti Tools 
gg Settings 


Note: Posts can attach to any page of your choice. The page can have a 
different name as well. Later in the lessons you will be shown how to 
attached the 'Posts' to the posts page of your choice. 


__ JL ... 


Howdy, Website Administrator 


Screen Options ▼ Help » 


Date Published L 


1 1 1 '.ten 


Q 2013/01/07 

^ Published 


Once you click Add new the following will be displayed. 


Add New Post < My First Website — WordPress - Mozilla Firefox^^B 

File Edit View Histoiy Bookmarks lools Help 
B[j Add New Post < My First Website — ... x My First Website | Just another Word... 

^ ® localhost/wp-admin/post-new.php 


p a 



J Getting Started Si Latest Headlines [”] Lorem Ipsum - All the ... 


Categories 

C§) Media 
£1 Pages 
Comments 
g Appearance 
Plugins 
SQ Users 
fj Tools 
gf] Settings 


Show on screen 

[7] Format [V] Categories 

Screen Layout 

Number of Columns: © 1 a 

[7] Tags |7] Featured Image [7] Excerpt [7] Send Tradebacks [7] Custom Fields [7] Discussion [7] Slug |V] Author 

Remember to choose Screen Options 


f— 

Add New Post 



iz 

Enter title here 

Post Heading 


Publish 




Save Draft 

Cg Add Media 


Visual Text 

Status: Draft Edit 

b / Ijnk b-quote del ins 

img ul ol li code more lookup dose tags fullscreen 


Visibility: Public Edit 


jj ^ 


Post Content 


[nj Publish immediately Edit 
Move to Trash 


Choose how the post will be displayed. 


© Quote 
© Status 


Note: Except for the few minor extras and changes, posts are almost identical to pages. 


Word count: 0 


Categories 

All Categories Most Used 
[T] Uncategorized 
♦ Add New Category 


Screen Option Enabled: 




Very usefull when linking to other websites! 

When making a new post, all linked websites will be notified. 



Custom Fields 


v Allow or Disallow Comments 

The text that displays at the end of a link. Preferably a 
keyword relevant to your website endeavors. 
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Let's add the posts now, do one at a time till finished. Do 5 - 10 posts either in your own words or using Lorem Ipsum 
Text. 

[Note: 

Please note that you can create different categories for your posts. Creating 10 posts all with different categories won't matter , as long as they are 
attached to the category of your choice. Try grouping posts with certain specific categories. 

Sample: If you sell food, you will categorize like this: 

Food Categories: 

00 Carrots 
00 Tomatoes 
00 Beans 
00 Corn 
00 Meat 
00 Onions 
00 Cucumbers... 

The list above can be divided into 7 post categories , each with their own posts.] 

Creating the first Post and a category for the post(s): 


Eile Edit 

Add New Post 
^ Iccrlhost 
Mott Visited 


History Bookmarks look Help 
• My First Website — x My First Website | Just another Word... | l iy lorem Ipsum • All the facts - Lrpsum ... J + 

wp- admin/ post-newphp 

Getting Started * latest Headlines li<r lorem Ipsum ■ All the ... 


C if- Google 


Tag* 

3J Media 
C Pages 
^ Comments 
B Appearance 


TJ Tods 
® Sellings 


Howdy. Website Administrator ■ 


fT Add New Post 
My First Post Post Heading 


Fill out the heading and content, choose to allow comments or not. Create a 
category for the post and select Publish to update/save. 


Publish 
Save Oralt 
Status Draft £41 
VaWty Public ElU 



As stated above, creating posts are done in the same way as creating pages. With a few extras like the format of the 
post, trackbacks and excerpt functions, the same applies. 


Creating a Category: 


New Category Created: 
My First Website 


Note: When creating a post, 
remember to attach it to a relevant 
category, otherwise the post will 
be shown under the default 
category, in this case; 
uncategorized... 


Categories 

All Categories Most Used 


3] Un categorized 


+ Add Hew Category 


— Parent Category — 
Add New Category 


0 
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One post have been added so far, the "My First Post". Add the rest of the posts by following the post process, adding a 
title as well as content. Remember, if you want comments to be made on a specific post, select allow comments or 
otherwise not. 

Create the following posts before moving on. (Either use your own words or use Lorem Ipsum as sample text) 

• My Second Post 

• My Third Post 

• My Fourth Post 

• My Fifth Post 

• My Sixth Post 

• My Seventh Post 

With 7 posts added, here's a quick overview: 


File Edit View History Bookmarks Tools Help 






[ □ Posts < My First Website — WordPress x | My First Website | Just another Word... 

| (or Lorem Ipsum - All the facts - Lipsum ... | New Tab 

(TL_ 

- W u 



^ localhosb'wp-admin/edit.php 




☆ ▼C il Google 


3 Most Visited [_] Getting Started i^i Latest Headlines lot Lorem Ipsum - All the ... 

| @ My First Website ^ + New 





Howdy, Website Adr| 


l All Post; 

Add New 
Categories 

C°& Media 
|Jp Pages 
@ Comments 
|nj Appearance 
$ Plugins 
Users 
Ti Tools 
Iff! Settings 


Posts Add New 

Made 7 Posts for Sample Website! 




Screen Options 

All 






S 







BulkActions 0 Apply 

Show all dates 0 View all categories 0 Filter 





HI 




Author 

Categories 

Tags 

W 

Date 

y 

g My Seventh Post 

Remember to create categories. As the 

Website Administrator 

My First Website 


- 

Q 

1 min ago 
Published 

g My Sixth Post 

website grows it gets easier to categorize 
your posts. It will also be easier for a 

Website Administrator 

My First Website 


- 

Q 

1 min ago 
Published 

g My Fifth Post 

visitor to find your posts/information etc. 

Website Administrator 

My First Website 


- 

P 

iMnjg?. 

Published 

g My Fourth Post 

Editing will also be easier as you won't be 
searching the whole time for your own 

Website Administrator 

My First Website 


- 

P 

1 ironago 
Published 

g My Third Post 

posts. :-) 

Website Administrator 

My First Website 



P 

2minsago 

Published 

g My Second Post 


Website Administrator 

My First Website 


- 

P 

2 mins ago 
Published 








□ My First Post Post one was not attached to a category and thus by 
default attached to "uncategorized" 

Website Administrator 

Uncategorized 


Q 

4 hours ago 
Published 

Q Hello world! 

Installation Sample - Will be deleted. 

Website Administrator 

Uncategorized 


O 

2013/01/07 

Published 

O Title 


Author 

Categories 

Tags 

9 

Date 


0 Apply 


Now that posts and pages have been added, have a look at the front end of the website. (The website front end will be 
visible to the public.) 

Front End View! 


My First Wobsitr 


Before 


My f»rW 


After 



Your Website I 
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Front Page Display - Choosing the "Home” Page and the "Post" Page. 

Viewing the root domain of a website will display the Home Page of the website, in others words, the page you set for all 
viewers to go to first. With Word Press, you can choose the Home Page and set the Post Page so that each will direct to 
their relevant information. The Home is the first page the visitor will see when visiting the root of the website: 

www.yourdoamin.co.za Root 

www.yourdoamin.co.za/contact-us/ Not Root 


Changing these settings: 
Go to: Settings / Reading... 


^ Heading Settings < My hrst Website — WordFress - Mozilla Hretox^ 
File Edit View History Bookmarks Tools Help 


t| □ My 


[ j Reading Settings < My First Website .. 


<■ a localhost/wp-admin/options-reading.php 


First Website | Just another Word... 


Si Most Visited [_] Getting Started [^i Latest Headlines lor Lorem Ipsum - All the ... 


(£} Dashboard 
£> Posts 
Media 
(P Pages 
(?) Comments 
|lg) Appearance 
$ Plugins 
^ Users 

Tfi Tools 


General 

VVritinc^^ 

[ Reading J 

;sion 

Media 

Permalinks 


^ i Reading Settings J 


Front page displays 


© Your latest posts 

Frontpage: —Select— [£] ChOOSe Home Page 


Blog pages show at most 


Posts page: ( — Select — [* ChOOSe Blog (Post) Page 


posts 100 Posts - Only display 10 per page 


Syndication feeds show the most 

RSS Feed ^ 

10 items 

recent 

Get Subscribers and notify 

For each article in a feed, show 

them everytime a post is 

@ Full text 7 r 


© Summary a ^ded. 




Search Engine Visibility 


O Discourage search engines from indexing this site 
It is up to search engines to honor this request. 


« Collapse 


Select the required pages and click Save Changes: 


Reading Settings < My First Website — WordPress - Mozilla Firefox^® 

File Edit View History Bookmarks Tools Help 

[ j Reading Settings < My First Website ... x | [ J My First Website | Just another Word... | + | 


f 9 localhost wp-admin/options-reading.php?settings-updated=true 


General 

Writing 

Reading 

Discussion 

Media 

Permalinks 


[Pii Most Visited [.J Getting Started li^i Latest Headlines lor Lorem Ipsum - All the ... 

lal 

{5} Dashboard 
& Posts 
C°j] Media 
(£] Pages 
Comments 
ID Appearance 
$ Plugins 
Users 

Tfi Tools 

R| 


Tt Reading Settings 

y 

Frontpage displays 

sample.. 

t 

©Your latest posts 
# A static Daae (select below) 

4 

Settings saved. 


Front page displays 0 Yo ur latest pc 

Frontpage: Home 
Posts page: Blog 

0 

® A static Daae iseieci oeiowi 




[ Front page: 

Home 

pi] 

| "Home" for Front Page 


|Po I 

(—Select — 

“0 

"Blog" for Post Page 



Blog pages show at most 


Syndication feeds show the most 
recent 


For each article in a feed, show 


Search Engine Visibility 


polj 

iUs 

Home 

item Privacy Policy 
Products 
Sample Page 
Terms & Conditions 


(a) Full text 
© Summary 

[T] Discourage search engines from indexing this site 
It is up to search engines to honor this request. 
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After saving, open the website to view the Home Page changes: 


My First Website 

just another WordPress site 


Website Preview after editing Home Page & Blog Page 



PRODUCTS SAMPLE PAGE TERMS & CONDITIONS 



This is now the Home Page 

What visitors will see when visiting the root of the website. 


Lorem ipsum dolor sit amet. consectetur adipiscing elit. Donee eu odio consectetur nisi venenatis pulvinar. Nunc est augue. tempor ut aliquet a. 
rhoncus a nibh- Donee placerat porttitor mi id feugiat. Fusee at uma in tellus suscipit ullamcorper. Donee rhoncus interdum eleifend. Aliquam erat 
volutpat. Nam lacus arcu. sodales at adipiscing non. imperdiet vel nisi. Quisque ultricies precium volutpat. Nunc nulla sem. posuere nee vrverra et. 
consectetur ac nisi. Phasellus et malesuada dui. 


Sed pharetra. tortor eu adipiscing congue, justo mauris blandit massa, eget dignissim sem urna ut eras. Cras sit amet mauris neque. Etiam lobortis 
porttitor diam eu sollicitudin. Maecenas luctus. odio sed elementum feugiat purus est condimentum lacus. sit amet euismod lacus diam in sapien. 
Vestibulum ante ipsum primis in faudbus ora luctus et ultrices posuere cubilia Curae: Quisque fringilla nisi vitae tortor mollis vitae elementum nisi 
cursus. In eu ipsum lacus. vel lobortis tellus. Nullam eleifend metus pulvinar dui condimentum eget auctor ante sodales. Pbasellus eros mi. ullam- 
corper a sollicitudin placerat. fringilla in orri. In hac habitasse platea dictumst Vestibulum in malesuada eros. Fusee euismod neque a diam aliquet 
pellentesque. Cras aliquet mauris ac tortor interdum porttitor eleifend mi feugiat Aenean nec dui at ipsum feugiat consequat sed luctus urna. Ae- 
nean auctor justo ac mauris iaculis in sollicitudin ligula convallis. 

Proin vitae tortor sed ora' porttitor interdum. In ultria'es lorem non nulla viverra id tristique leo semper. Vrvamus faucibus neque laoreet purus 
viverra id rhoncus ligula lobortis. Vivamus in ligula ante. Nullam ac nunc vel augue ullamcorper iaculis eget eu purus. Aenean id volutpat sem. Sed 
fringilla diam sed felis auctor eget ullamcorper sapien consectetur. Cum sotiis natoque penatibus et magnis dis parturient montes. nascetur ridicu- 
lus mus. Nulla dignissim vulputate dignissim. 

Du is tristique. augue vitae ullamcorper dapibus. neque arcu volutpat purus, id malesuada nisi uma eu justo. Vestibulum commodo, purus lobortis 
laoreet cursus. nisi felis vestibulum tortor. venenatis pulvinar nunc quam quis velit. Nullam id nulla at massa mollis porttitor in eu enim. Nulla vitae 
eleifend sapien. Curabitur et arcu at urna auctor pellentesque. Maecenas erat quam. mollis et pulvinar at. imperdiet id mauris. Donee congue tortor 
nec ante cursus semper. Sed nulla tortor. sagittis eu blandit venenatis. laoreet a justo. Integer nibh quam, elementum id bibendum ut aliquet sit 
amet felis. Aenean quis odio id massa placerat tincidunt non in quam. Mauris molestie consequat lacus id ti'ncidunt Mauris et magna dui. sed ele- 
mentum sem. Nam ultrices nisi nec diam scelerisque eu elementum nibh vestibulum. 

Nullam egestas, nulla ut sodales dictum, magna libera hendrerit turpis. id tristique mauris mi in mi. Pellentesque ultrices ornate dui. non luctus ora 
semper a. Nunc ullamcorper porttitor ante, sollicitudin rhoncus arcu consectetur non. Sed porta, nisi non venenatis congue. nisi massa vulputate 
eras, ac malesuada nulla sapien ut ipsum. Etiam nibh enim. dignissim at faucibus non. pellentesque ut arcu. Nam ligula sem. precium at euismod 
tincidunt commodo eu metus. Aenean vestibulum iaculis erat sed convallis. Integer nisi odio. vestibulum nec feugiat eu. bibendum sed ipsum. 
Praesent semper neque ut nisi placerat blandit. 

Edit 


Proudly powered by WordPress 


Now view the Blog Page: 


My First Website 

just another WordPress site 


The Post Page is now the Blog Page! 

All posts will be attached to the Blog Page. 




PRIVACY POLICY 


SAMPLE PAGE 


TERMS & CONDITIONS 


My Seventh Post 

Leave a reply 

Lorem ipsum dolor sit amet consectetur adipiscing elrt Phasellus semper quam vel ligula 
fringilla luctus. Etiam mattis. lectus non laoreet vulputate. quam leo pellentesque ipsum. sit 
amet tempor quam diam in turpis. In imperdiet scelerisque ornare. Suspendisse auctor vestibu- 
lum quam vel aliquam Cras mattis arcu vitae sapien iaculis quis molestie elrt fringilla. Sed tin- 
cidunt tincidunt nibh. ut imperdiet ante consequat sed. Praesent eu orci sed ante mattis irrter- 
dum quis id massa. 

Suspendisse id condimentum velit. Duis adipiscing posuere ante, at blandit nunc rutrum ul Sed 
consequat dictum leo. semper aliquet ante ultricies eu. Nulla sodales auctor neque. ut lacinia 
nunc egestas eu. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Maecenas 
non elementum mauris. Suspendisse viverra placerat cursus. In hac habitasse platea dictumst. 
Cras vitae enim mi. at blandit nulla. Pellentesque semper euismod vehicula. Vestibulum lacinia 
facilisis ligula nec scelerisque. Integer quis dui et mi placerat faucibus non et metus. 

Vivamus lacinia. ipsum vel rutrum sodales. lorem dolor commodo diam. non auctor justo sapien 
id purus. Nullam vulputate ultricies pulvinar. Curabitur susdpit nisi accumsan lectus lacinia vitae 
vehicula massa ultricies. Morbi at mollis nunc. Nam tortor metus, eleifend vitae semper eget 
consectetur eu lorem. Donee nec luctus nibh. Maecenas volutpat porta tristique. Maecenas ul- 
trices cursus tellus. sit amet vehicula ante adipiscing hendrerit. Ut fringilla. neque ac fringilla ali- 
quet. lacus mauris pharetra purus, vel volutpat dolor odio at sem. Nam blandit rhoncus ligula. 
Pellentesque volutpat sem quis ligula aliquet pharetra. Aliquam nisi lorem. auctor eget cursus 
nec. tincidunt at mi. Praesent non augue uma. et ullamcorper velit. Quisque viverra leo a lectus 
malesuada cursus. 

Proin molestie. eros a varius iaculis. arcu arcu commodo odio. id fermentum dui orci sit amet 
leo. Maecenas at bibendum purus. Vestibulum at leo magna. Suspendisse enim tortor. mollis vi- 
tae lobortis sit amet congue quis enim. Curabitur vel lorem eros. Curabitur a enim ligula. Pel- 
lentesque eu erat eget lorem porta feugiat Donee et libera pretium odio mattis hendrerit ac ac 
lacus. Etiam tellus sapien, cursus non egestas sed. mollis ut libero. Donee a tristique nunc Sed 
euismod eleifend congue. 

Pellentesque accumsan, uma et accumsan tincidunt ligula eras fringilla dolor, et tincidunt arcu 
nibh eget quam. Praesent sed lectus quam. at mollis lorem. Nam suscipit fermentum sem nec 
sodales. Integer ac magna sem. vitae interdum mi. Nam ac tortor sit amet erat convallis pellen- 
tesque. Ut id elit elit Nullam a ante magna. Duis sodales dui id turpis eleifend vel lacinia massa 
consequat. Nullam ac feugiat risus. Nunc eget nulla ac magna fringilla varius ut sit amet dui. 



Mv Seventh Post 
My Sixth Post 
My Fifth Post 
Mv Fourth Post 
My Third Post 


RECENT COMMENTS 

Mr WordPress on Hello world! 


ARCHIVES 

lanuarv 2013 


CATEGORIES 

My First Website 
Uncategorized 


META 

Site Admin 


Entries RSS 
Comments RSS 
WordPress.org 
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Creating a Menu 

Creating a menu for your website is a good way of organizing and displaying pages across the website. You may only 
want to display a few pages within the main menu on the Home Page. Hidden pages can also be linked to with the help 
of menu's and custom menu widgets. 


Go to: Appearance/Menus 


file Edit view History gookmoiks look H«lp 

Menus i My Fnt Website — WonVreu x Blog | My First Website | Just enothes _ J+ ^ ^ ^ 




^ vi lociPtost 


N * C 1 B~ Google 

p ft * 


|£ Most Visited Getting Suited * latest Headlines l(» Loiem Ipsum - All the ... 

J) Dashboard , , 

an Menus 

? Posts 

^ Uedla Custom l inli 

ID Pages 


Howdy. Website Admmstrator 


No Menu Items Added Yet... 

I + fry pe name and select Create Menu to save new menu item.- 


(ED 

Header 

Background 

Editor 

& Plugins 
queers 
T! Tools 
| IT] Settings 


To create a custom menu, give It a name above and dick Create Menu. Then choose items like pages , categories or custom Inks from the left column to add to Ibis i 
Alter you have added your Items, drag and drop to put Item in Ite order you want You can also cftck each item to reveal additional coniguralion options 
When you have ISnished building your custom menu, make sure you dick the Save Menu button 


After creating the menu item , choose what you want to add to the menu: 


<• * 

A Moft V 

IX 


A Mon ViMod Ctrtrie suit'll «. l««t Hudhnn liv l own Ipwn A 


|H“>| Menus 


Choose what you want to add... 



xiMonu E UAoniaecally add new totHevei pages 

The Main Menu was created, now you have to add pages to it. 


Select the Main Menu S 


& Plugins Custom Ui 


Navigate to specific pages using the custom links function. 


Select the pages that you want 
to add to the Main Menu and 
click "Add to Menu; 



You can add pages/custom links and categories. 


4 Pages have been added to the Main Menu Item. Select Primary Menu ("Main Menu") and Save! 


Posts 
G§)j Media 
|£] Pages 
@ Comments 

|^n| Menus 

The Main Menu menu has been successfully created. 


[ Main Menu j 

Theme Locations 

Menu Name Main Menu □ Automatically add new top-le 


^ Your theme supports 1 menu. Select which 
menu you would like to use. 

Primary Menu 

Main Menu [v]| 

f ■> 

Delete Menu 

1 Themes 
Widgets 

Menus 

Header 

Pages that was added to the Main Menu Item 

Home Page ▼ 

Background 

Editor 

Choose and Save!!! ] 


Blog 

$ Plugins 
<!£> Users 

Custom Links 

Contact Us Page ▼ 

URL http:// 


ti Tools 

Label Menu Item 

Products Page ▼ 

ffYl Settings 

(d) Collapse menu 

Add to Menu 



Pages 

Most Recent View All Search 

□ Home: Home 

□ About Us 

□ Blog 



Select the Primary Menu! This theme only supports a top 
menu (header). Custom themes have both a top (header) 
and a bottom (footer) menu. Save when done. 
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Viewing the results. 


My First Website 




New Menu Created - "Main Menu" 


Home 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donee eu odio consectetur nisi venenatis puh/inar. Nunc est augue. tempor ut aliquet a, 
rhoncus a nibh- Donee placerat porttitor mi id feugiat. Fusee at urna in tellus suscipit ullamcorper. Donee rhoncus interdum eleifend. Aliquam erat 
volutpat. Nam lacus arcu. sodales at adipiscing non. imperdiet vel nisi. Quisque ultricies pretium volutpat. Nunc nulla sem. posuere nee viverra et. 
consectetur ac nisi. Phasellus et malesuada dui. 


Sed pharecra, tortor eu adipiscing congue. justo mauris blandit massa, eget dignissim sem urna ut eras. Cras sit amet mauris neque. Etiam lobortis 
porttitor diam eu sollidtudin. Maecenas luctus. odio sed elementum feugiat. purus est condimentum lacus. sit amet euismod lacus diam in sapien. 
Vestibulum ante ipsum primis in faucibus ora luctus et ultrices posuere cubilia Curae: Quisque fringilla nisi vitae tortor mollis vitae elementum nisi 
cursus. In eu ipsum lacus. vel lobortis tellus. Nullam eleifend metus putvinar dui condimentum eget auctor ante sodales. Phasellus eros mi, ullam- 
corper a sollidtudin placerat. fringilla in orri. In hac habitasse platea dictumst. Vestibulum in malesuada eros. Fusee euismod neque a diam aliquet 
pellentesque. Cras aliquet mauris ac tortor interdum porttitor eleifend mi feugiat. Aenean nec dui at ipsum feugiat consequat sed luctus urna. Ae- 
nean auctor justo ac mauris iaculis in sollidtudin ligula convallis. 

Proin vitae tortor sed ora porttitor interdum. In ultricies lorem non nulla viverra id tristique leo semper. Vtvamus faucibus neque laoreet purus 
viverra id rhoncus ligula lobortis. Vivamus in ligula ante. Nullam ac nunc vel augue ullamcorper iaculis eget eu purus. Aenean id volutpat sem. Sed 
fringilla diam sed felis auctor eget ullamcorper sapien consectetur. Cum sodis natoque penatibus et magnis dis parturient montes, nascetur ridicu- 
lus mus. Nulla dignissim vulputate dignissim. 

Duis tristique. augue vitae ullamcorper dapibus. neque arcu volutpat purus. id malesuada nisi uma eu justo. Vestibulum commodo, purus lobortis 
laoreet cursus. nisi felis vestibulum tortor, venenatis putvinar nunc quam quis velit. Nullam id nulla at massa mollis porttitor in eu enim. Nulla vitae 
eleifend sapien. Curabitur et arcu at urna auctor pellentesque. Maecenas erat quam. mollis et putvinar at imperdiet id mauris. Donee congue tortor 
nec ante cursus semper. Sed nulla tortor, sagittis eu blandit venenatis. laoreet a justo. Integer nibh quam, elementum id bibendum ut aliquet sit 
amet felis. Aenean quis odio id massa placerat tincidunt non in quam. Mauris molestie consequat lacus id tincidunt Mauris et magna dui. sed ele- 
mentum sem. Nam ultrices nisi nec diam scelerisque eu elementum nibh vestibulum. 

Nullam egestas. nulla ut sodales dictum, magna libero hendrerit turpis. id tristique mauris mi in mi. Pellentesque ultrices ornare dui. non luctus orri 
semper a. Nunc ullamcorper porttitor ante, sollicitudin rhoncus arcu consectetur non. Sed porta, nisi non venenatis congue. nisi massa vulputate 
eras, ac malesuada nulla sapien ut ipsum. Etiam nibh enim. dignissim at faucibus non. pellentesque ut arcu. Nam ligula sem. pretium at euismod 
tincidunt commodo eu metus. Aenean vestibulum iaculis erat sed convallis. Integer nisi odio. vestibulum nec feugiat eu. bibendum sed ipsum. 
Praesent semper neque ut nisi placerat blandit. 

Edit 


PromKv oowwed by WocdPress 


To use all the pages, create another menu with the name "Custom Menu 1" 


My First Website 




The Custom Menu 1 menu has been successfully created. 


2 Menu Items Added: Main Menu | Custom Menu 1 


Theme Locations 

Your theme supports 1 menu. Select which 
menu you would like to use. 

Primary Menu 

Main Menu [▼] 


Custom Links 

URL http : // 

Label Menu I ten 


Custom Menu l 


l 


1 


Main Menu 


Menu Namel Custom Menu 1 


D Automatically add new top-level pages 


Privacy Policy 


Terms & Conditions 


Page 

Page 

Page 


This menu item will be added later, it show 3 pages 
that will be displayd within the "Sidebar" of the 
website. 


You can create as many menu items as you wish. Make sure that pages are 
attached to the relevant menu item. If you have 100 pages you can split them up 
with the help of custom menu widgets. Menu Item can be changed at any time, 
just click on the item (page) and select remove. 


[About Us 1 

Page ▼ 

Navigation Label J 

tme Attribute 

About Us Button Text 

1 Hover over the button 


1 to display text... 


Original: About Us 

/■ 1 This will re 

1 Remove 1 Cancel 

^ * the Menu 1 

v r 1 ^ 

move the About Us from 
tern "Custom Menu 1" 


Privacy Policy 

Page v 


Terms & Conditions 


Page 
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Adding Widgets 

Adding Widgets to the website will greatly improve the usability and navigation of the website. It gives the website a 
better look as well. 


B D Widgets < My First Website — WordPr... x [7 Blog | My First Website | Just another ... | + 

kxalhost/wp-admin/widgets.php 

0 Most Visited [..] Getting Started |^i Latest Headlines lot Lorem Ipsum - All the ... 


P A 


{£. Dashboard 
Posts 
C°fc Media 
(C Pages 
<p) Comments 


fwidge^l 

N Menus 
Header 
Background 
Editor 

$ Plugins 
Users 

Ti Tools 

[Sf] Settings 


Widgets 


The default theme - 3 Widget Areas! Custom Themes have many more & more options... 


Available Widgets 





Drag widgets from here to a sidebar on the right to activate them. Drag widgets back here to deactivate them and delete their settings. 

Archives 

Calendar 

Categories 

Custom Menu 


A monthly archive of your site's posts 

A calendar of your site's posts 

A list or dropdown of categories 

Use this widget to add o 
menus as a widget. 

ne of your custom 

Meta 

Pages 

Recent Comments 

Recent Posts 


Log in/out, admin, feed and WordPress 
links 

Your site’s WordPress Pages 

The most recent comments 

The most recent posts o 

n your site 

RSS 

Search 

Tag Cloud 

Text 


Entries from any RSS or Atom feed 

A search form for your site 

Your most used tags in cloud format 

Arbitrary text or HTML 





Drag Meta Here to 'Disable' 


Inactive Widgets 

Drag widgets here to remove them from the sidebar but keep their settings. 


Click-Hold and drag widgets that you do not want to use to the area shown, 


Already changed a widget and don't want to use it anymore, drag it over here to keep the 
settings saved. If you want to use it again, just move them back. 


^ Sidebar 


Howdy, Website Administrator 


Screen Options ▼ Help ▼ 


v 


Main Sidebar 

Enabled Widgets 

Appears on posts and pages except the 
optional Front Page template, which has its 
own widgets 

Search 


Recent Comments 


First Front Page Widget Area 


Appears when using the optional Front Page 
template with a page set as Static Front Page 


Have a closer look at the default theme widgets. 

• Archives 

• Calendar 

• Categories 

• Custom Menu 

• Meta 

• Pages 

• Recent Comments 

• Recent Posts 

• RSS 

• Search 

• Tag Cloud 

• Text 


Currently, the Home page is set to 'Front Page Template'. This displays the 'Home Page' as a "Full Width Page" without 
any sidebar. To display widgets on the home page you need to change the home page so that the sidebar is activated. 
For the tutorial, you will be activating some of them. 



I dates g Filler 


□ Title 

Bulk Actions 0 Apply 


Go to Pages/All Pages and select the Home Page for editing: 


Remember: 

You can change page settings at any time. The Blog page does have 
a sidebar as per default install. By splitting widgets across pages 
(Home & Blog Page) duplication can be eliminated. 

The default theme does not have an option of splitting the sidebar 
between pages, but custom themes do have this option. 
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Let's see what happens, do the following: 


Page Attributes 

Parent 


{no parent) 

Template 


□ 


Front Page Template 
Default Template 


Front Page Template 


Full-width Page Template, No Sidebar 

1 


i 

I 


From the Page Attributes, select "Default Template". This will give 
the option with a sidebar, and with a sidebar widgets can be 
added to the Home Page. 

With the Default option chosen select update to save changes. 


Need help? Use the Help tab in the upper right 
of your screen. 


When viewing the Home Page with a Page Attribute of "Default Template" the sidebar will be on the right. Many 
custom themes have multiple options like a left or right sidebar, blog only or home page only widgets. 

Home Page with Page Attribute of 'Default Template': 


My First Website 

JSust another WordPress site 


HOME BLDG CONTACT US 




All Current Pages have Default Templates 
(All pages will have a right sidebar) 


Default Template 



Lorem ipsum dolor sitamet, consectetur adipiscing elit. Donee eu odio consectetur nisi vene- 
natis pulvinar. Nunc est augue, temper ut aliouei a, rhoncus a nibh. Donee place-rat portcitor mi 
id feugra:. Fusee at urna in tellus suscipit ullamoonper. Donee rhoncus interdum eleifend. Alli- 
quam erat volutpaL Nam lacus arcu, sodales at adipiscing non, imperdiet vel nisi. Quisque ul- 
tricies pretium volutpaL Nunc nulla sem, posuere nec viverra et, consectetur ac nisi. Phasellus 
et malesuada dui . 

Sed pharetra, tonor eu adipiscing congue, justo rnauris blandit massa, eget dignissim sem urna 
ut eras. Crassit aimet mauris neque. Etiam lobortis porttitoc diam eu sollicitudir. Maecenas Ilbc- 
tus r odio sed elementum feugiat purus est condiimencum lacus, sit ame; euismod llacus diam in 
sapien. Vestibulurn ante ipsum primes ir faudbus onoi Huctus et ultrices posuene cubilia Curae; 
Quisque fringilla nisi vitae to nor mollis vitae elementum nisi cursus. In eu ipsum lacus, vel 
lobortis tellus. IN u Ham eleifend metus pulvinar dui candimentum eget auctor ante sodales. 
Phasellus eros mi, ullamcorper a sollicitudin placera:, fringilla in ord. lin hat habitasse platea dic- 
tumst. Vesdibulum in malesuada eros. Fusee euismod neque a diam aliquet pelllencesque. Cras 
aliquet mauris ac to nor interdum porttitor eleifend mi feugfac. Aenean nec diui at ipsum feugiat 
consequat sed luctus urna. Aenean auctor just o ac mauris iaculis in sollicitudin ligula convallis. 


RECENT ROSTS 

My Seventh Post 
My Sixth Post 
My Fifth Post 
My Fourth Post 
My Third Post 


RECENT COMMENTS. 

Mr WordPress on Hello world! 


ARCHIVES 


Proin vitae tortor sed orci pontitor interdum. In ultricies lorem nan nulla viverra id crisd'que leo 
semper. Vivamusfaucibus neque laoreet purus viverra id rhoncus ligula lobortis. Viva mus in 
liguila ante. Null-am ac nunc vel augue ullamcorper iaculis eget eu purus. Aenean id volutpat 
sem. Sed ffingj lla diam sed felis auctor eget ullamcorper sapien consectetur. Cum soeiis na- 
toque penatibus ec magnis dis parturient monies, nascetur ridiculus mus. Nulla dignissim 
vulputate dignissim. 


January 2G13 


CATEGORIES 

MV Ftret Website 
Uncategorized 


Duis tristique, augue vitae ullamcorper dapibus, neque arcu volutpat purus, id malesuada nisi 
uma eu justo. Vestibulum commodo, purus lobortis laoreet cursus, nisi felis vestibulum tonor, 
venenatis pulvinar nunc quam quis veliL Nullam id nulla at massa mollis porttitor in eu enim. 
Nulla vitae eleifend sapien. Curatartuir et arcu at uma auctor pellentesque. Maecenas erat quam.. 


The page above is the front end view of the website's "Home Page". With a page attribute set to 'default template', the 
home page will be shown with a right sidebar that can be customised with widgets. 
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As stated above, all pages within our main menu have default templates assigned to them, in other words, all pages will 
have a right sidebar. Have a look at both the "Blog Page" and the "Home Page": 


My First Website 

Just another WordPress site 


My First Website 

Just another WordPress site 



CONTACT US 


PRODUCTS 


Home 

Lorem ipsum dolor sit amet consectetur adipiscing elit. Donee eu odio consectetur nisi vene- 
natis pulvinar. Nunc est augue, tempor ut aliquet a, rhoncus a nibh. Donee placerat porttitor mi 
id feugiat. Fusee at uma in tellus suscipit ullamcorper. Donee rhoncus interdum eleifend. Ali- 
quam erat volutpat Nam lacus arcu, sodales at adipiscing non, imperdiet vel nisi. Quisque ul- 
tricies pretium volutpat. Nunc nulla sem, posuere nee viverra et consectetur ac nisi. Phasellus 
et malesuada dui. 

Sed pharetra, tortor eu adipiscing congue, justo mauris blandit massa, eget dignissim sem uma 
ut eros. Cras sit amet mauris neque. Etiam lobortis porttitor diam eu sollicitudin. Maecenas luc- 
tus, odio sed elementum feugiat purus est condimentum lacus, sit amet euismod lacus diam in 
sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
Quisque fringilla nisi vitae tortor mollis vitae elementum nisi cursus. In eu ipsum lacus, vel 
lobortis tellus. Nullam eleifend metus pulvinar dui condimentum eget auctor ante sodales. 
Phasellus eros mi, ullamcorper a sollicitudin placerat fringilla in orci. In hac habitasse platea dic- 
tumst Vestibulum in malesuada eros. Fusee euismod neque a diam aliquet pellentesque. Cras 
aliquet mauris ac tortor interdum porttitor eleifend mi feugiat Aenean nec dui at ipsum feugiat 
consequat sed luctus urna. Aenean auctor justo ac mauris iaculis in sollicitudin ligula cortvallis. 

Proin vitae tortor sed orci porttitor interdum. In ultricies lorem non nulla viverra id tristique leo 
semper. Vtvamus faucibus neque laoreet purus viverra id rhoncus ligula lobortis. Vtvamus in 
ligula ante. Nullam ac nunc vel augue ullamcorper iaculis eget eu purus. Aenean id volutpat 
sem. Sed fringilla diam sed felis auctor eget ullamcorper sapien consectetur. Cum sociis na- 
toque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla dignissim 
vulputate dignissim. 


HOME CONTACT US PRODUCT5 





Search 

My Seventh Post 

| S-ni. | 


Leave a reply 


RECENT POSTS 


RECENT POSTS 


Lorem ipsum dolor sit amet consectetur adipiscing elit. Phasellus semper quam vel ligula 


My Seventh Post 


My Seventh Post 

My Sixth Post 

amet tempor quam diam in turpis. In imperdiet fWlfflSqueomare. Suspendisse auctor vestibu- 

Mv Sixth Post 

My Fifth Post 

lum quam vel aliquam. Cras mattis arcu vitae sapien iaculis quis molestie elit fringilla. Sed tin- 

Mv Fifth Post 

My Fourth Post 

cidunt tincidunt nibh, ut imperdiet ante consequat sed. Praesent eu orci sed ante mattis inter- 

Mv Fourth Post 

My Third Post 

dum quis id massa. q .. 4.L. _ 1 

Doth are the Same! 

Mv Third Post 


Suspendisse id condimentum velit Duis adipiscing posuere ante, at blandit nunc rutrum ut Sed 


RECENT COMMENTS 

consequat dictum leo, semper aliquet ante ultricies eu. Nulla sodales auctor neque, ut lacinia 

RECENT COMMENTS 


nunc egestas eu. In hac habitasse platea dictumst In hac habitasse platea dictumst Maecenas 


Mr WordPress on Hello world! 

non elementum mauris. Suspendisse viverra placerat cursus. In hac habitasse platea dictumst 

Mr WordPress on Hello world! 


Cras vitae enim mi, at blandit nulla. Pellentesque semper euismod vehicula. Vestibulum lacinia 



facilisis ligula nec scelerisque. Integer quis dui et mi placerat faucibus non et metus. 


ARCHIVES 


ARCHIVES 


Vivamus lacinia, ipsum ~| nitTlir i — commodo diam, non auctor justo sapien 


lanuarv 2013 

vuiputate ultricies pulvinar. Curabrtur suscipit nisi accumsan lectus lacinia vitae 

lanuarv 201 3 


#! imtarnHttdJiltricies. Morbi at mollis nunc Nam tortor metus, eleifend vitae semper eeet 



consectetur eu lorern7Doneni9mtlMMibU^ cenas v °l ut P at porta tristique. Maecenas ul- 


CATEGORIES 

trices cursus tellus, sit amet vehicula ante adipiscing hendrerit. Ut fringilla, neque ac fringilla ali- 

CATEGORIES 


quet, lacus mauris pharetra purus, vel volutpat dolor odio at sem. Nam blandit rhoncus ligula. 


Mv First Website 

Pellentesque volutpat sem quis ligula aliquet pharetra. Aliquam nisi lorem, auctor eget cursus 

Mv First Website 

Uncategorized 

nec tincidunt at mi. Praesent non augue urna, et ullamcorper velit Quisque viverra leo a lectus 

Uncategorized 


malesuada cursus. 



Though separate pages, both use the right sidebar with the same widgets activated. 
To see what widgets are currently used, have a look at the following: 


Howdy, Website Administrator 


(J} Dashboard 

SO Widgets 

Enable - Drag Widgets to the Right 

Posts 

C§)j Media 

Available Widgets 

Disable - Drag Widgets to the Left 

|£] Pages 

Drag widgets from here to a sidebar on the right to activate them. Drag widgets back here to deactivate them and delete their settings. 

<p> Comments 

^Archives 

| Calendar ^ Categories 


Themes 

[ Widgets J 

Menus 

Header 

Background 

Editor 

& Plugins 
tQ Users 
Ti Tools 
[|?| Settings 


A monthly archive of your site's posts 


Custom Menu 

Use this widget to add one of your custom 
menus as a widget. 


A calendar of your site's posts 


A list or dropdown of categories 


Meta Pages 

Log in/out, admin, feed and WordPress links Your site's WordPress Pages 


Recent Comments 


The most recent comments 


me 


Recent Posts 


A search form for your site 


The most recent posts on your site 

Tag Cloud 

Your most used tags in cloud format 


RSS 

Entries from any RSS or Atom feed 

Text 

Arbitrary text or HTML 


Inactive Widgets 

Drag widgets here to remove them from the sidebar but Keep their settings. 



Main Sidebar 

Appears on posts and pages except the 
optional Front Page template, which has its own 
widgets 

Search 


Recent Comments 


The green highlighted widgets are enabled. If a widget is located within the 
right pane, it means it's activated and will be shown on the website. 


Organize them the way you want; no particular order is needed. Do this by 
dragging them up or down, the choice is yours. 


Recent Posts 


On the Left: Notice that Recent Posts moved down... 


Archives 


Categories 


47 | P a g e 


BestWordPressThemes. co.za 










Note: This is the default WordPress Theme. If you choose to use the Home Page with a sidebar, know that both the 
Home Page and The Blog Page will have the same sidebar. 

[If you want a Full Width Home Page, select it from the Page Attribute options, otherwise for the sake of the lessons you will design 
the website with a front page sidebar.] 

Changing Widget Information and adding a Custom Menu Widget: 


eactivate them and delete their settings. 

Categories 

A list or dropdown of categories 


Recent Posts 

The most recent posts on your site 


C 


Drag it over to Main Sidebar 

s 


Custom Menu 


Log in/out, admin, feed and WordPress 
menus as a widget. links 


RSS 

Entries from any RSS or Atom feed 


Enter a Title for the Widget. Leave blank to lgs 


Main Sidebar 

Main Sidebar 



Appears on posts and pages except the 

Appears on posts and pages except the 

optional Front Page template, which has its 

optional Front Page template, which has its 

own widgets 

own widgets 



Custom Menu 

Custom Menu 


Title: 

Title: 



Give a Title 

Give a Title 


Select Menu: Custom Menu 1 [▼j 

Select Menu 

Custom Menu 1 [~^~|| 


Delete | Close j 

Delete | Clos 

Main Menu 




Main Sidebar 

Appears on posts and pages except the 
optional Front Page template, which has its 
own widgets 





Search 




Title: 



► Search the Website 




Delete | Close , 


What's New! 

Number of posts to show: 5 
O Display post date? 

Delete | Close 


Recent Comments 
Title: 


What Others are Saying 

Number of comments to show: 5 


Delete | Close 

Select the Menu to display. 

Remember: You already created 2 menus: 

-Main Menu 
-Custom Menu 1 
Both Menus have different pages attached to them. 

PS: You can show both menus by adding another Custom 
Menu Widget. 


Main Sidebar 


Appears on posts and pages except the 
optional Front Page template, which has its 
own widgets 


Custom Menu 


Search 


Recent Posts 


Recent Comments 


Archives 


Categories 




r > 

First Front Page Widget Area 


Appears when using the optional Ron^ac^ 
temglat^with a page set as Static Front Page 

Front Page 


Widgets 

Second Front Page Widget Area 

Appears when using the optional^ron^ag^ 
Jemglat^with a page set as Static Front Page 



To add another widget, simply drag and drop the widget to the 
desired position. The widget can be on top, second, middle or the 
bottom, the choice is up to you. Most Custom Themes have many 
widgets to choose from and they can be placed at various layout 
positions. 


Note: The widgets on the left refer to the Front Page Template. Use 
this only when the Home Page is set to Front Page Template as 
discussed earlier. This will give a different look to the Homepage as 
opposed to the right sidebar. For the tutorial, only the right sidebar 
will be used. 
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If you choose the Front Page Template widgets, it will look something like this: 


My First Website 

Just another WbnjPms Ptc 



Home 


Lonefn Ipsum dolor sit arrtet, conscactir adlpiscmg dlL D 
rtioocus a nfbh. Donee pUcerat porttcor ml Id fcuglat Fus 
nokjtpat. Nam lacus amt, sodales at adlplscmg non. Impel 
conscaetur ac noL pnasclus ct malcsuada dul. 


Scd pfurctra, tortor cu ad curing cooguc, Justio maurts bl 
portfltor dlam eu somcltudin. Maecenas luctus. odlo sed e 
Vestbulum ante Ipsum pel mis In feudbus Orel luctus ct ult 
cursus. In eu Ipsum lacus, vcl lobortis tdus. Nullam clofc 
rorper a sollcmjdin placcrat, blnglla In Orel, In hac hablta 
pdlentesquc. Cras allquct maurts ac terror mterdum pore 



PrtHni 



utverra Id rboncus llgula lobortis. Vtvamus In llgula ante. N 
fnrgila dam sod fells auaorcgct ubmcorptr sapien cor 
lus mus. Nula dlgnlssm vupuurc dgnsslm. 


DUs tnsbque, auguc vtac ulamcorper dapibus, neque ar 
laorcec cursus, nisi fells vestlbulum tortor. ven enacts puM 
defend sopen Curabitur ct ami atuma auctor pcHcntcs 
nee ante anus semper. Scd nulla tortor, sagtttts cu blant 
a met feds. Aenean puts odlo id massa placcrat tlnddunt n 




eras, ac rrulcsuada nulla sapien ut Ipsum. Edam nbh cnlr 
nnodunt. commodo cu metus Aenean vestbulum lacubs 
Praescnt semper neque ut msl placcrat bland It. 


Enabled Widgets 

Tirst Front Page Widget Area 

/ipeears ivnen ucmg the spticnal Fnni Page 
tecipiate with a page set as Static f nnt Page 

Recent Posts 
Caleiidai 

Second Fruul Pd^e Wid^eL Aiea 

ires v/imn ui/ny the jpiiunal Fruni Page 
tenpia:e iwr/i a pag? sef as Static Fnnt Page 

Custom Menu 
Recent Comments 

- 



As you get familiar with the functions of widgets, it gets easier to decide which you want and don't want. Here's a quick 
overview of what the widgets are: 


• Archives 

• Calendar 

• Categories 

• Custom Menu 

• Meta 

• Pages 

• Recent Comments 

• Recent Posts 

• RSS 

• Search 

• Tag Cloud 

• Text 


- Keeps all posts saved and organised. 

- Shows a calendar on the website. 

- Organize your post into categories which you create yourself. 

- Display pages and other information by creating shortcuts (menus). 

- User log-in - Site Admins and Website Links. (Will not use in this tutorial). 

- Display the website's pages. Can be customised. 

- Displays all the recent comments made by visitors on posts etc. 

- Displays all the recent posts made by you. 

- Subscribers to RSS will receive automat notifications with every post made. 

- Search the Website. 

- When tags are used, they will be displayed in a box like window. Customizable. 

- Text widgets. Great resource. Use HTML to fine tune the look of a widget. 


Remember, most widgets are customizable and can be moved to whatever position desired. If you are looking for more 
widgets, you can browse through widgets on WordPress.org or you can install a Custom Theme with more options. 


Custom themes are a great way of creating the website you want! 
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Adding a Page Header 

To display a header on the website gives the website a better look. You can even use this space to create an 
advertisement, like inserting an affiliate link or even Google AdSense. Here, the choice is up to you if you want to add a 
header or not. The default theme dimensions for an image header are: 960px x 250px. This means the Width of the 
picture is 960 pixels and the Height is 250 pixels. 


My First Website 


(£} Dashboard 
£> Posts 
C°)] Media 
(P Pages 
Comments 


Themes 

Widgets 


[ Header j 

Background 

Editor 

$ Plugins 
^ Users 

Ti Tools 

@Y| Settings 

(◄) Collapse menu 


fc Custom Header 

Header Image 


Select Image 


Header Text 

Header Text 

Text Color 


My First Website 


Just another WordPress site 


Width: 960px 
Height: 250px 


You can select an image to be shown at the top of your site by uploading from your computer or choosing from your media library. After selecting an image you will be able to crop it. 
Suggested width i s 960 pixels Suggested height is 250 pixels 

Select a image with the same dimensions or 
create your own image. 


Choose an image from your computer: 


Browse, | 


D 


Or choose an image from your media library: 


Choose Image 


f] Show header text with your image. 


Ira) 


Create your own picture: 

Open Windows Paint, and select a new document. With the new document opened, press the following keyboard keys 
together to open the "Resize and Skew" window: 


(isf I Q ^ v Untitled - Paint 


Home View 



Press "OK" once the dimensions are entered. This will resize the document (picture) to 960px x 250px. Edit the 
document like you want it to be. 
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f 

> 

This is My First Website 1 Designed. 

^ ... . ZSfL 

7 r~ Affordable Web Design! 

-Easy to Use 

/^sb— r 

-Fun to Use 


-Customizable 

t i ■ 1 ~ 

-and many more... 

- — 


Contact Me @ Oil 000 1111 to do the same 4 U ^ 


This header is created with a border only to show where it displays on the front web page. Design the header image 
according to your own strategy. 



Now that you will begin to work with external files, create a folder for your website to put all the files within. Save all the information, files and 
other related documents thereto: 


e 


m 


Computer ► Local Disk (C) ► wamp ► temp websites ► myfirstwebsite.cc 


3 s 


File Edit View Tools Help 
Organize ▼ Include in library ▼ 


C:/wamp/temp websites/myfirstweBsite.co.za7... your files... 

Share with ▼ New folder 


Trt Favorites 

* 

Name 

Date modified 

Type 

Size 

E Desktop 



2013/01/21 12:35 PM 

File folder 


Downloads 


I i WWW 1 

2013/01/21 12:36 PM 

File folder 


Recent Places 


i ) mydomainname.co.za details ^ 

2013/01/07 11:56 AM 

Text Document 

2 KB ] 

■ Desktop 


—The file you created earlier. 



Working with various websites can be made easy by cutting and pasting the www 
folder contents of C:/wamp/www to the folder you created - C/wamp/temp 
websites/myfirstwebsite.co.za/. Replace whenever work continues on the specific 
website. 

Create Categories for the files: 

-images 

-pdf documents 
-word documents etc. 

Save the files within the correct folder... 

Create a Folder - any name will do. Save all websites hereto. 


Create a Folder - Choose the name of the domain. 

This makes it easier to find if you have a lot of websites. 


Save all the current website's files hereto. 


(Insert On the left: 

Create a folder to save all files to. This is 
only a guideline ; choose the method that 
works for you.) 
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Save As: 

There are many types of picture formats available that can be used for web design! Two types will be used regularly. 

PNG: Picture without background! Transparent! 

JPEG: Picture with Background! 

Note: MS Paint will not save the picture without a background. Programs like Adobe Photoshop , Corel Draw etc. can save 
a picture with a transparent background , in other words a .PNG. Free programs like The Gimp can also save transparent 
.PNG images. 

Remember to save the picture once done. (It's important to save all your work while editing and creating them. For future reference , it's 
recommended that you save , document and archive all steps. This way you will always have a backup of the file and you will know what you did 
when you did it. It takes a little effort and not too much of your time to document all your moves). 

Inserting the header on the Website: 

Go to Appearance/Header 


Click on Browse, select picture from the folder you created and select Open 

Most Visited i Getting Started Si, Latest Headlines lor Lorem Ipsum - All the ... 

Header 


My First Website 


(£} Dashboard 
£> Posts 
C°& Media 
[P Pages 
£) Comments 

Themes 

Widgets 

Background 
I Editor 

$ Plugins 
^ Users 

Ti Tools 

[ly] Settings 


Custom \ 

Header Image 


Header Text 

Header Text 




0 Plugins 
^ Users 


My First Website 

Just another WordPress site 


C 


You can select an image to be shown at the top of your site t 
Suggested width is 960 pixels. Suggested height is 250 pix< 


Choose an image from your computer: 

| Browse- ] 


J 


Or choose an image from your media library: 


|2) Show header text with your image. 


(|p File Upload 

S' 

, ► Computer ► Local Disk (C:) ► wamp ► temp websites ► myfirstwebsite.co.za ► images 

▼ | | | Search images p 1 

Organize ▼ New folder 

m - a # 


iff Computer 

Local Di^McIT 


J 


i Games 

A Intel 
j) PerfLogs 
A Program Files 
Jt Program Files (x86) 
A RaidTool 

Jt Users 
f wamp 
A alias 
J4 apps 

A bin 

A lang 
A logs 


^ I 


^ t temp websites 


A myfirstwebsite.co.za 


L, images 





Locate the header image and select Open. 


A tmp 
A tools 


Filename: header 


Open ]▼ || Cancel | 


Next, select "Upload". 


I=a Appearance 


Themes 

Widgets 

Menus 

Header 

Background 

Editor 


UUJL Ul IL/LI 1^1 YVUIUI I J J J I 



Select Image 

Click "Upload" & Save 
Changes 


You can select an image to be shown at the top of your site by uploading 
Suggested width is ‘9-60 pixels. Suggested height is 250 pixels. 


Choose an image from your computer: 


|C:\wamp\temp website Browse.. I Upload 


Or choose an image from your media library: 
Choose Image 
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The following window will appear: 


^ Header < My First Website — WordPress - Mozilla Firefox ^ 

File Edit View History Bookmarks Jools Help 


Header < My First Website — WordPr. 


... x [riMy 


First Website | Just another Word... 


^ (& localhost vvp-admin/themes.php?page=custom-header&step=2 

[fii Most Visited [..] Getting Started Latest Headlines (OF Lorem Ipsum - All the ... 


My First Website 


Dashboard 
Posts 
Media 
(C Pages 
< JD Comments 


Themes 

Widgets 

Menus 

Header 

Background 

Editor 

$ Plugins 
^ Users 
Ti Tools 



Crop Header Image 


Choose the part of the image you want to use as your header 


r 

N 

This is My First Website 1 Designed. 

JsSssse/*- 


Affordable Web Design! 

-Easy to Use 


-Fun to Use 


-Customizable 


-and many more... 



Contact Me @ Oil 000 1111 to do the same 4U!, 


i 


Crop and Publish 

Skip Cropping, Publish Image as Is 

1 



Use the image as is, no cropping. 


Click on Skip Cropping, Publish Image as Is. You want to use the image like you designed it, 960 x 250. Once clicked, the 
image will be attached and you need to Save Changes for effects to take place. 


C Pages 
Comments 


Themes 

Widgets 

Menus 

Header 

Background 

Editor 

Plugins 
■SjA, Users 

Ti Tools 

HTl Settings 


Header Image 

Ffreview 


My First Website 

Just another WordPress site 


The Header Picture is Attached! 


This is My First Website I Designed. 


-Easy to Use 
-Fun to Use 
-Customizable 
-and many more.. 


Affordable Web Design! 


Contact Me @ Oil 000 1111 to do the same 4 U! 


Text Color 


You can select an image to be shown at the top of your site by uploading from your computer or choosing from your media library. After selecting an image you will be able to crop it. 
Suggested width is 960 pixels. Suggested height is 250 pixels 

Choose an image from your computer: 

[ Browse- | 

Or choose an image from your media library: 

Choose Image 


Uploaded Images 


You can choose one of your previously uploaded headers, or show a random one 


Header Text 
Header Text 


This will remove the header image. You will not be able to restore any custom izations. 


Remove Header Image Remove the picture at any time. 


[yj Show header text with your image. 


c 


J Save changes to accept new settings! 


The Header Image is set. It will now be displayed on the website. 
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View the Front-End Changes! 


My First Website 

just another Word Press site 


NOME BLOG COffTACT US 


□Remove the text to the Left... 


The Header Image is added. 


* ■" N 

This is My First Website I Designed. 

Affordable Web Design! 

-Easy to Use 
-Fun to Use 
-Customizable 
-and many more... 

Contact Me @ Oil 000 1111 to do the same 4 U I, 


Home 


About Us 


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donee eu odio consectetur nisi vene- 
natis pulvirtar. Nunc est augue. tempor ut aliquet a. rhoncus a nibh. Donee placerat porttitor mi 
id feugiat. Fusee at uma in tellus suscipit ullamcorper. Donee rhoncus interdum eleifend. Ali- 
quam erat volutpat. Nam lacus arcu. sodales at adipiscing non. imperdiet vel nisi. Quisque ul- 
tricies precium volutpat. Nunc nulla sem. posuere nee viverra et. consectetur ac nisi. Phasellus 
et malesuada dui. 

Sed pbaretra. tortor eu adipiscing congue. justo mauris blandit massa. eget dignissim sem urna 
ut eros. Cras sit amet mauris neque. Etiam lobortis porttitor diam eu sollicitudin. Maecenas luc- 
tus. odio sed elementum feugiat. purus est condimentum lacus. sit amet euismod lacus diam in 
sapien. Vestibulum ante ipsum primts in faudbus ord luctus et ultrices posuere cubilia Curae: 
Quisque fringilla nisi vitae tortor mollis vitae elementum nisi cursus. In eu ipsum lacus. vel 
lobortis tellus. Nullam eleifend met us pulvinar dui condimentum eget auctor ante sodales. 
Phasellus eros mi. ullamcorper a sollicitudin placerat fringilla in ord. In hac habitasse platea dic- 
tumst Vestibulum in malesuada eros. Fusee euismod neque a diam aliquet pellentesque. Cras 
aliquet mauris ac tortor interdum porttitor eleifend mi feugiat Aenean nec dui at ipsum feugiat 
consequat sed luctus urna. Aenean auctor justo ac mauris iaculis in sollicitudin ligula convallis. 

Proin vitae tortor sed ord porttitor interdum. In ultricies lorem non nulla viverra id tristique leo 
semper. Vivamus faudbus neque laoreet purus viverra id rboncus ligula lobortis. Vivamus in 
ligula ante. Nullam ac nunc vel augue ullamcorper iaculis eget eu purus. Aenean id volutpat 
sem. Sed fringilla diam sed felis auctor eget ullamcorper sapien consectetur. Cum sociis na- 
toque penatibus et magnis dis parturient montes. nascetur ridiculus mus. Nulla dignissim 
vulputate dignissim. 


Terms & Conditions 


My Seventh Post 
My Sixth Post 
My Fifth Post 
Mv Fourth Post 
My Third Post 


RECENT COMMENTS 

Mr WordPress on Hello world? 


ARCHIVES 

tanuarv 2013 



CATEGORIES 


Note: With the default theme the header will be displayed 
on all the pages. Choose the correct image for the design or 
use a Custom Theme. 


Removing 'Header Text'. 


Remove Header Image 


Header Text 

Header Text 


Text Color 



how header text with your image. 


J 


Select Colof 


Save Changes 


Remove Header Text and click Save Changes 


View the Front-End Changes! 


HOME BLOG COUTACTUS PRODUCTS 


' \ 

This is My First Website I Designed. 


Affordable Web Design! 

-Easy to Use 
-Fun to Use 
-Customizable 
-and many more... 

Contact Me @ Oil 000 1111 to do the same 4 Ul^ 


Home 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donee eu odio can sene our nisi vene- 
natis pulvinar. Nunc est augue, tempor ut aliquet a, rhoncus a nibh. Donee placerat porttitor mi 
id feugiat. Fusee at urna in tellus suscipit ullamcorper. Donee rhoncus interdum eleifend. Alli- 
quam erat volutpat Nam lacus arcu, sodales at adipiscing non, imperdiet vel nisi. Quisque uil- 
cricies precium volutpat. Nunc nulla sem. posuere nec viverra et, cansectecur ac nisi. Phasellus 
et malesuada dui.. 

Sed pharetra, tortor eu adipiscing congue, justo mauris blandit massa, eget dignissim sem urna 


About Us 
Privacy Policy 
Terms & Conditions 



ffiECENT POSTS 


The text that appeared above 
the Menu (Header Text) is 
gone. 
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Changing the Background Color 

Change the look and feel even further. 

Go to: Appearance/Background 

Either select an image from your computer or choose a background color. 


localhost'wp-adrnin/themes.php?page=custom-background 


Egt Most Visited [_] Getting Started Si Latest Headlines lot Lorem Ipsum - All the ... 


My First Website 


(2} Dashboard 
Posts 
Cg>j Media 
£1 Pages 
£) Comments 


Themes 

Widgets 

Menus 

Header 




$ Plugins 
^ Users 
TJ Tools 
gf] Settings 

4 Collapse menu 



Custom Background! 


Background updated. Visit your site to see how it looks. 


Background Image 


Display Options 


Save Changes 


D 



Choose an image from your computer: 


Or choose an image from your media library: 
Choose Image 


C 


I Current Color #344745 


J 



Enter number here or choose 
from the panel on the left. 


Default Setting: #e 6e6e6. 

Enter the following: #344745 

Save all Changes when done. 

View the Front-End Changes! 


HOME BLOG CONTACT US PRODUCTS 



> 

This is My First Website 1 Designed. 


-Easy to Use 

Affordable Web Design! 

-Fun to Use 
-Customizable 
-and many more... 

Contact Me @ Oil 000 1111 to do the same 4 UL 


Home 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donee eu odio consectetur nisi vene- 
natis pulvinar. Nunc est augue, tempor ut aliquet a, rhoncus a nibh. Donee placerat porttitor mi 
id feugiat. Fusee at uma in tellus suscipit ullamcorper. Donee rhoncus interdum eleifend. Ali- 
quam erat volutpat Nam lacus arcu, sodales at adipisdng non, imperdiet vel nisi. Quisque ul- 
tricies pretium volutpat. Nunc nulla sem, posuere nee viverra et consectetur ac nisi. Phasellus 
et malesuada dui. 

Sed pharetra, tortor eu adipiscing congue, justo mauris blandit massa, eget dignissim sem uma 
ut eras. Cras sit amet mauris neque. Etiam lobortis porttitor diam eu sollicitudin. Maecenas luc- 
tus. odio sed elementum feugiat purus est condimentum lacus, sit amet euismod lacus diam in 
sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; 
Quisque fringilla nisi vitae tortor mollis vitae elementum nisi cursus. In eu ipsum lacus, vel 
lobortis tellus. Nullam eleifend metus pulvinar dui condimentum eget auctor ante sodales. 
Phasellus eras mi, ullamcorper a sollicitudin placerat fringilla in ord. In hac habitasse platea dic- 
tumst Vestibulum in malesuada eras. Fusee euismod neque a diam aliquet pellentesque. Cras 
aliquet mauris ac tortor interdum porttitor eleifend mi feugiat Aenean nec dui at ipsum feugiat 
rnnseoiiat sed lurtus lima. Aenean aurtnr iustn ar mauris iarulis in snllirifudin lieiila rnnvallis. 


About Us 
Privacy Policy 
Terms & Conditions 


RECENT POSTS 

Mv Seventh Post 
My Sixth Post 
Mv Rfth Post 
Mv Fourth Post 
Mv Third Post 

RECENT COMMENTS 


Select any color you want or select a custom image. 
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Basic Structure is Done - Congratulations! 

You've designed your first basic website. 

Recap of what you did: 

You... 


• Determined the Operating System Status 

• Downloaded WAMP Server 

• Downloaded Latest Word Press 

• Installed WAMP Server 

• Configured Word Press 

• Created a File for All Information to be Saved 

• Downloaded & Installed Notepad++ 

• Created a Database within phpMyAdmin 

• Edited Word Press ( wp-config-sample) for Database Acceptance 

• Installed Word Press for first time use 

• Changed important Word Press Settings before use 

• Added Content to the Website - Pages/Posts 

• Chose the Front Page Display ("Flome" Page and the "Post" Page.) 

• Created a Menu 

• Added Widgets 

• Added a Page Header 

• Changed the Background Color 

Now that the basic structure is done, it's time to further fine tune the website. 

In the lessons below, you will learn how to finalise the website for uploading to the internet. Before moving on, I've 
already drafted a few pages and posts for the website. Lorem Ipsum was deliberately used in order to get you 
accustomed to the layout and feel of creating the posts and pages. 

The posts & pages created will help you even more in understanding what needs to be done. 

When choosing a new design for a new client and whilst preparing a preview, Lorem Ipsum will help you if you don't 
have any information regarding the client or the business. In the phase that follows, you will be given a set of text that 
represents a few pages and a few posts. Use this to get a better feel for the website. 


[Back to Topi 
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Changing the Posts and Pages! 

The following post and pages were made for you. It's only for layout , viewing & informational purposes. 

Home Page 

We all know what they say about first impressions... The homepage (front page of your website) is where you and your 
company get to make a first impression. It's the first place new visitors come and where old visitors come back. You 
must cater for both types of customers. There are a few things that are important to your homepage: 

Navigation 

Navigation is the most important part of your homepage. It doesn't matter what else is on your site, if the visitors can't 
get there. On your homepage your visitors need to be able to reach every part of your website. Your links on your 
navigation bars should be the same on every page. Your visitor will then know how to get back to whatever page really 
interested him. When users cannot find what they want, they simply look at another site. Your links on the navigation 
bars should also be simple (one or two words) but descriptive. 

Branding 

Branding is another essential element for you homepage. To promote your business, your small business has a logo and 
it's pasted on everything you can find. Well, it should be posted in a predominant place on your website too. We all 
know that branding is words or a mark of a company (logo) that shows the consumer the identity of the producer of the 
product/service. Showing your logo on your homepage reminds users exactly where they are. 

Content 

Last but not least is content. Content is also very important. You must remember to write your content like you are 
speaking to your visitor as it creates a better connection between your website and the visitor. Your homepage content 
must be fresh and interesting to make them want to read more of your site. Also, include briefly or thoroughly exactly 
what you or your company does. You'll be amazed how many websites you have to search to find out what their 
purpose is. 

These things should get you started on building your homepage. The homepage does not need to be flashy with all 
types of images and flash designs. Visitors like websites when they are simple and easy to understand. You must 
remember who your audience is; therefore you need to speak in their language. 

Blog Page! 

A blog may be essentially an online journal displayed in reverse chronological order but it is also a website which 
requires the same attention to detail than any other website requires. It also requires the same design elements as a 
regular website which does not function as a blog. Bloggers have decisions to make regarding design elements of the 
blog such as colors and layout, fonts and the inclusion of advertisements. Although many blog software programs 
provide a variety of templates which make designing a blog rather simple, blogs can also be highly customized by 
bloggers who possess some web design skills. 

Colors and Layouts of a Blog 

The colors and layout of a blog is one of the most obvious design considerations bloggers must consider when starting 
or re-designing their blog. Bloggers may use a solid color background, blocks of different colors in the background or 
pictures or textures in the background. These background elements can be any color imaginable. However, bloggers 
who are considering the colors to use in their blog should consider using colors which will be appealing to most blog 
visitors. This is important because the use of bright colors which are harsh on the eye can result in diminished blog 
traffic. 

The layout of the blog should also carefully be considered by the blogger. The blog should be arranged in a fashion 
which is interesting to blog visitors, suits the subject of the blog and is presented in a logical manner which is easy for 
visitors to follow. This is important because failure to use a layout which meets these criteria may result in blog visitors 
choosing not to visit the blog anymore because the layout is confusing or unappealing. 
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Fonts Used in a Blog 

Bloggers have a number of options available to them when selecting fonts to use in their blog. These options include the 
font chosen, the text size and the color of the text. Bloggers should consider choosing a font which works well with the 
overall design of the layout of the blog and suits the subject matter. The font should be a common font as well. This is 
important because blog visitors may have trouble viewing the font if the blogger selects a unique font which is not 
common. The text size and colors of the text should also be carefully considered. These elements are primarily 
important for readability. Text size should be set so members of the target audience can easily read the text. The colors 
used for the text should also be selected to enhance readability. One way to do this is to select colors which are 
appealing to the eye but also contrast with the background color. 

Inclusion of Advertisements in a Blog 

Bloggers must also consider the inclusion of advertisements when they are designing their blogs. Once this decision is 
made, bloggers who opt to include advertisements must carefully consider how and where they wish to display these 
advertisements. Advertisements can be displayed in various locations throughout the blog and can be designed to be 
discrete or obvious depending on the preferences of the blogger. Advertisements can be a variety of sizes and shapes 
and are highly customizable in a number of different ways. 

Contact Us Page! 

This gives all visitors a way to communicate with your business or with you, regarding all kind of things from questions 
about products to ordering your products and services. Many contact forms can also be used to gather information for 
survey questions, polling visitors on various topics, or allowing visitors to join your newsletter. 

When companies post their email addresses on their websites, it opens the door for spammers to send you all kind of 
emails that you, more than likely, do not wish to receive, this can include advertisements, pornography, and other 
similar material. If you use a contact form, your email is hidden from the human eye. Of course, this does not mean that 
you will never receive spam, but with the newest technologies available with contact forms you will not receive as much 
as some. 

Using contact forms is a better way to protect, not only your email address, but also personal information that might be 
included on the contact form by your visitors. You will be protecting not only yourself and your business, but all that 
wish to correspond with you through the contact form. 

With contact forms on your website you will be able to give your visitors the ability to communicate safely and 
effectively through a website form, thus giving them a more secure and reliable communication system. With this in 
place, you will see an increase in community interaction and comments for your surveys and polls. 

Using a contact forms is easy; you do not need to know html or any technical knowledge, you can work on any web 
server. All you have to do is fill in the information, copy the code that is generated, and then paste the code onto the 
appropriate page of your website. 

Products Page! 

If you know how to write articles and how to use SEO to promote a product then you should find internet marketing 
fairly simple. If you have not yet been successful, you must be missing something. 

The way to write articles is to carefully consider the product you are trying to sell and write down as many aspects of it 
that people would to want it for as you can. Then write articles on each of these reasons why people should purchase 
your product. Make the articles simple; explain very clearly what the product can do, and why the reader should buy it. 

Your title should be based upon the particular benefit of your article that you are writing about, and then you will be 
sure that the reader is focused on what you are offering. The visitor will not just be a casual reader, but somebody that 
has searched for your topic, and decided to read your article based upon the title. Make sure that you write about the 
topic of the subject and you will have a good chance that the reader will want to read more. 
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Use your author's resource box to advertise a page on your website that can provide further information on the 
product: not just your home page, but one relevant to the product. Whatever it is, it must relate to the product or your 
visitor will leave immediately: a good prospect lost forever. 

You cannot just rely on article readers to buy your product, but you also need visitors to your site from the search 
engines. Optimize your website properly to persuade the search engines that your website is good enough to provide a 
visitor with the information they want on your subject. 

By combining article writing and SEO, you should be able to drive enough traffic to your website to sell any product you 
want. 

About Us Page! 

Your About Me/Us Page is one of the best ways to promote yourself. It allows you much more freedom than other 
pages. 

Describe yourself and your Business: 

At the top of the page you should describe yourself and your business. Say a little about yourself, how you got into 
selling, and what you sell. Also say why people should buy from you instead of the competition. Examples could be that 
your website is updated every week; your prices are low etc. 

Link to your Feedback: 

To prove that you are a trusted seller you should link to your feedback ratings from your About Me page. Just include a 
simple sentence like "Click Here to view my feedback." 

Provide a Contact Address: 

Buyers viewing your About Me page may want to ask more questions so it is only logical that you provide a contact 
address. Make it clickable for maximum ease to the customer. For example "You can contact me at any time at: 
info@yourdoaminname.co.za." 

Provide a direct link back to your Website: 

Not all the visitors to the About Me page will have found it through your website. Some may not even be aware that 
you own a website. The only way to make sure that everyone viewing your About Me page knows that you have an 
website is to provide a clickable link to it. For example "Click Here to visit my Website." 

Other Links: 

If you have a specific product which you want to promote, or a specific page you want to link to then do it here. For 
example "You can visit my Newest Product by Clicking Here." 

Customers will use your About Me page to assess whether to buy from you so it's essential that yours is effective. 

Privacy Policy Page! 

One of the essential steps to protecting your privacy is to understand how to read a privacy policy. 

Privacy policies should be made available in some form anytime you are asked to provide personal information. 

Financial institutions, health facilities or other businesses that collect your information can be asked to show you their 
privacy policy before you give them your information. 

If the company does not have privacy policies consider doing business elsewhere. It is a show of respect to customers to 
tell them how their information will be used. 

Online you will find privacy policies posted on websites. The privacy policy is an indication of the steps they will take to 
protect your identity or to inform you of how they will treat the information you provide. Simply having a privacy policy 
does not guarantee you any level of protection. To understand what is protected and what is shared you must read the 
policy. 
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Each site has its own criteria for a privacy policy. Some give full protection including encryption of passwords and not 
providing your information to any third party while others tell you that your information will be shared with affiliated 
companies or businesses they feel you would be interested in hearing from. You must read the policy to be aware of the 
steps being taken to protect yourself. 

When a business is requesting personal information it is reasonable to ask what information is collected and why it is 
needed. If they request information that doesn't seem relevant they should state why they need it. 

If there is no explanation for the request try to avoid giving the additional information or ask them why they need it. 
Asking for your income or the name of your spouse is the kind of information you might question providing without 
reasonable cause. 

Terms & Conditions Page! 

Website terms and conditions are important for any blogger or web designer to have as they set out the necessary legal 
notices for visitors to a website. Also known as website terms of use, or website terms of service, they will usually 
include various disclaimers and also specify what is expected of visitors. 

Important Stuff to Be Included 

As with website privacy policies, the terms and conditions for a blog or website will need to match the intended use of 
the blog or website. There are certain key things which these documents should be included as a matter of course, but 
there is other stuff which may be optional. 

This list includes a number of things which should probably be included in the terms and conditions for most blogs: 

• a statement that people using the website will be bound by the terms and conditions (so they are effective); 

• a disclaimer and limitation of liability statement (to reduce the risk that visitors will be able to sue the blog 
owner); 

• a statement which discusses links to and from external sites, and outlines that affiliate links may be used; 

• a clause which identifies the local law applicable in determining any disputes under the terms and conditions; 

• a paragraph regarding the conduct of visitors on the site; and 

• a statement outlining the intellectual property arrangements, and permitted uses of blog materials. 

There are and can be more elements added, please consult a legal representative if you are unsure. 


[Back to Top) 
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Viewing the Website Changes! 

Now that you have a guideline of what is needed to enter into the website, let's view the site as it is currently. 


htOMt buXi CCnrfL i uS rt+LOUCii 


* *> 

This Is My First Website I Deigned. 


Affordable Web Design L 

■ Easy to Us# 

-Funt-e Use 
-CustamlzablA 
-and many 

Contact Me @ Oil WO 1111 to do the same 4 IJ! 


Home 

The homepage lihe/nanr pflge ajfyour wtbsttej Is where you arid you- company get :□ nuke a 
first mprcsiion end we all know what They say about t rv impressions ... Its tho f rsr plate new 
vista rs come and where dd visitors came back. Vbu must cater to both types af customers. 
There are a few things that arc- essential to paur homepage and eath Is deplaned below. 

Navigation 

Navigation h The mast Important pert ol your homepage. It daesht mutter what else s on your 
site. If the 'tls trots can't gjet there, an pour heme page ycur vis hers need to bo able to reath ev- 
ery part of your wets cc. ¥bur links an pour navigation bars should tc the same- er every page. 
VourvtsJcor will then know how no get bask [ovtfiatcrcr page really Interested him. When users 
rramat find what they want They simple lock at another site. This Is a fart, Vbtr links an the aoM- 
.garrlDri bars should also he simple -lone or two wards) bur descrlpitit. 

Branding 

Brardpg Is anoihcr essential element for you hamcaago. I am sure that poursmal business 
has a laga and Ihs pasted an every; hi ng pa u can tlnd, to premote paLr business. Wei, t should 
be posted In a predominant place on your wets tc race We all know iha* branding Is words ar a 
mark af a company {such as a ’toga] That shows the consumer the identity at the producer of the 
protijcti'sc-rvtce. Showing your logo on your homepage re minds users notify whore they are. 

lo nitre 

Last but not least Is content. Cement c also very Important. You mLEt remember co-write pnur 
corrtent like you arc speaking topeurvistar as It t re arcs a borer cemcti on between your web 
site and the VBltor. Your homepage- contort must be fresh and Interesting to make- them went 
to read more of your she. You might create links to the Inside ei your ske In the teat Aba, you 
will want to Indulc In laymanb terms eicacdp what you or pour company docs, tau would be 
□maxed law many websites you have to search ro r nd aut what their purpose Is. 

These things should gat pou started on bjUdiig yeur homepage. There Is one ide that I haw 
teamed, h Is die KtE-S rule (Keep It Simple Student}. TUlt homepage docs rut need to be liashy 
wth al types of Images, and hash design, ar b Irking, Musi people like sites when they arc sim- 
ple and easy to understand. You mLEt remember who yuur audencc s. Therefore pau need ta 
speak In thdr language. 

Bdi 


About Lb 
Privacy Foley 
TcrrTE AiCondtors 


Tps for Keep lm Year Bog Lie to Date 
Pcs Ei EKncrn: ef a Bee 
M grtgi Bucceszai: Boa 
F remit ra i^ur Her 
Learning aboui Btog gr g 


lAUaie Ad rdn mater on Martelnrao 
SjooEshil Beg 
Mr WcrdPrcss on Hdki wortdl 


loruaryZOlB 


Rfr HtsrVfttodtE 
Ur-atcae fixed 


j.iU,- iranmil Ir,' 


Note: 

Changes that can be made before finalising: 

• Delete the Sample Page 

• Delete the Sample Post 

• Delete the Sample Comment 

• Change the Home Page Title 

• Insert a Contact Form on the Contact Us Page using Contact form 7 

• Insert a Slider on the Home Page 

• Changing the Blog for viewing purposes. 

• Finalizing the Website and getting ready to move Online. 

In order to complete the basic website before uploading to the "live" internet, let's do the above steps: 
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Delete the Sample Page | Sample Post & Sample Comment! 

You have already added meaningful pages to the website. Per default installation , WordPress created a Sample Page 
and now the page can be deleted. 


Dashboard 
£ Posts 
C°h Media 


| All Page; 

Add New 

< p . ) Comments 
g Appearance 
Plugins 
^ Users 

Ti Tools 

(ig Settings 


Pages Add New 

All (S) | Published (8) 

Bulk Actions [V]l Apply I Show all dates [- Filter 


Steps to Delete a Page/Post/Comment 



About us T)rop Down Box 

0 Blog 
g Contact Us 
g Home 
g Privacy Policy 
g Products 


E | Sample Page 

Edit | Quick Edit | Trash | View 


g Terms & Conditions 

E| Title 


Click on All Pages: 

Select Sample Page 

Select Drop Down Box - Move to Trash 
Click Apply 


Delete the page permanently by clicking on Trash and following the same instructions as previously. 


M[j Pages < My First Website — WordPress x | [ My First Website | Just another Word... j + ^ 

^ localhost''wp-admin/edit.php?post_type=page&paged=l&trashed=l&ids=2 

\PS) Most Visited LJ Getting Started l^i Latest Headlines lor Lorem Ipsum - All the ... 

Pages Add New 


0 F ilter 


Pages 


Add New 



All (7) | Published (7) prash(1)l 
Bulk Actions [^] Apply Show all dates 


<p) Comments 
H Appearance 
$ Plugins 
^ Users 

T! Tools 

[|5 Settings 


El Title 

g About Us 

El Bl °9 
g Contact Us 
g Home 
g Privacy Policy 
g Products 
g Terms & Conditions 

□ Title It's not Here Anymore... 


Sample Page Moved to Trash 


To Delete Permanently: 

Click on Trash to navigate to 
the Trash (Deleted) Page 


All (7) | Published (7) | Trash 1) step 3 

Bulk Actions [▼]! Apply I Show all dates [▼] Filter Empty Trash 


Bulk Actions 


liHHEIsffl 


J Step ; 


Sample Page 

Step 1 

[7] Title 


Select Drop Down Box- 
Delete Permanently. 

With Delete selected and 
sample page checked 
marked, click on Apply to 
Delete. 


0 


Bulk Actions [▼] Apply Empty Trash 



Dashboard 

Pages Add New 

£> Posts 
Media 

[A".) "] 


^ Bulk Actions [▼] Apply Show all dates [▼] Filter 

All Pages 

o Title 

Add New 

|r] About Us 

<P Comments 

Sample Page is Deleted and no 

g Appearance 
$ Plugins 
^ Users 

□ Biog files are within the Trash Folder! 

[r] Contact Us 

Ti Tools 

(fy] Settings 

[p] Home 

..*) Collapse menu 

g Privacy Policy 


|g Products 


g Terms & Conditions 


O Title 


Delete the following as well: 


Sample Post (Hello World!) 
Sample Comment 
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Change the Home Page Title 

For this default theme, you want to display a meaningful Title and not the word Home. 


I 

[Home ] Currently on the Home Page 

The homepage (the front page of your website) is where you and your cor 
first impression and we all know what they say a bout first impressions... 
visitors come and where old visitors come back, You must cater to both 


Go to Pages/All Pages/... .Edit Home Page 


i [”] Pages < My First Website — WordPress x j [ j My First Website | Just another Word... 

^ ♦ r> localhost'wp-admin/edit.php?post_type=page 

\P\i Most Visited [.J Getting Started |&[i Latest Headlines lot Lorem Ipsum - All the ... 


My First Website P + New 


Dashboard 

| Pages Add New 

^ Posts 
C§| Media 

ISsa— 1 3 

Nk (7) | Published (7) 

Bulk Actions [▼] Apply Show all dates [V] Filter 


□ Title 


[fj About Us 

<&) Comments 

Q Appearance 

□ Bl °9 

& Plugins 
Q Users 

jfj Contact Us 

Ti Too,s 

[1?] Settings 

□ J2SS e 

|JditlQuick Edit | Trash | View 

0 Collapse menu 

L Pr ] Edit this item 


[fj Products 


Dashboard 


Posts 
[ U Media 



All Pages 

Add New 

^ Comments 


+ New View Page 


It, Edit Page Add New 


Designing Your Own Website 

(Home) 

Permalink: http://lo Ih ost/ View Page 


C§J; Add Media 


b i link b-quote dei ins img ul dI 

li code more lookup close tags fu 

The homepage <eii>(the front page of your website)</en> is where you and your 


Click on Update when finished to Save Changes. 


[r] Terms & Conditions 
□ Tide 

Bulk Actions ▼ Apply 


blog contact us PRODucrs Oops! - It still needs to be "Home" 




This is My First Website 1 Designed. 



Affordable Web Design! 

-Easy to Use 


-Fun to Use 


-Customizable 


-and many more... 

— 


Contact Me @ Oil 000 1111 to do the same 4U!, 


Resigning Your Own Website J Title Changed! 

The homepage (the front page of your website) is where you and your company get to make a 
first impression and we all know what they say about first impressions . . It's the first place new 
visitors come and where old visitors come back. You must cater to both types of customers. 
There are a few things that are essential to your homepage and each is explained below. 

Navigation 

Navigation is the most important part of your homepage. It doesn't matter what else is on your 
site, if the visitors cant get there. On your homepage your visitors need to be able to reach ev- 
ery part of your website. Your links on your navigation bars should be the same on every page. 
Your visitor will then know how to get back to whatever page really interested him. When users 
cannot find what they want they simple look at another site. This is a fact Your links on the navi- 
gation bars should also be simple (one or two words) but descriptive. 

Branding 


About Us 
Privacy Policy 
Terms & Conditions 


Search 


RECENT POSTS 

Tips for Keepin g Your Blo g Up to Date 
Design Elements of a Blog 
Maintaining a Successful Blog 
Promotin g Your Blo g 
Learning about Blogg in g 


View the website front end. You will see that the 
Menu has changed. There is no "Home" button 
anymore; it's now "Designing Your Own Website". 


To change the text the menu needs to be edited. The 
title will still be the same, but the menu item will 
display with the word 'Home'. 
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Go to Appearance/Menu 


File Edit View History Bookmarks Tools Help 


j Menus < My First Website — WordPress x | ; My First Website | Just another Word... | + J 


* localhost , 'wp-admin/nav-menus.php?action=edit&menu=B 


tQt Most Visited [_] Getting Started |^ti Latest Headlines lot Lorem Ipsum - All the ... 


{j} Dashboard 
& Posts 
(*>) Media 
£] Pages 
<£) Comments 


[Men | 

Header 

Background 

Editor 

Plugins 
(Q Users 
Ti Tools 
gj] Settings 

« Collapse me 


Menus 


Theme Locations 

Your theme supports 1 menu. Select which 
menu you would like to use. 

Primary Menu 

Main Menu Q 


Custom Links 
URL http:// 

Label Menu Item 


Pages 

Most Recent View All Search 

□ Terms & Conditions 

□ Privacy Policy 

□ Contact Us 

□ About Us 

□ Products 

□ Blog 

□ Designing Your Own Website 

Select Al Add 


Custom Menu 

Menu Name Main Menu 
Delete Menu 


Select Main Menu 


Designing Your Own Website 


Designing Your Own Website 


Original: Desionino Your Own Website 
Remove I Cancel 


□ Automatically add new top-level pages 






\ 


■ Navigation Label (Button Text) 

This is the Button Text. Change to 
Home so that it will display 
’Home 1 on the website. 

Title Attribute (Button Hover Text) 
This is the Button Hover Text. 
When you hover the mouse 
pointer over the button, the text 
will appear. 


Themes 


Widgets 

Primary Menu 

Menus 

Main Menu 

Header 


Background 


Editor 


Plugins 

Custom Links 

^ Users 

URL http:// 

Ti Tools 
[|U Settings 

Label Menu Itei 

< Collapse menu 

Pages 


Your theme supports 1 menu. Select which 
menu you would like to use. 


□ 


Most Recent View All Search 
[T] Terms & Conditions 
[ | Privacy Policy 


Save Changes to Take Effect 

r 

1 

Home 

Page ▼ 

Navigation Label 

Title Attribute 

Home 

Designing Your Own Website 


Original Desionino Your Own Website 
Remove I Cancel 


Blog 


Page 

Page 

Page 


Change the fields to the following: 

Navigation Label: 

Home 

Title Attribute: 

Designing Your Own Website 

Save Changes & View Website! 


Any page title can be changed by following these steps. Remember, WordPress is customizable and once you get used 
to the structure everything will become a breeze. 


| J biog comwctus pkxjucis Title Changed - But Navigation is Home! 




This is My First Website 1 Designed. 


-Easy to Use 

Affordable Web Design! 

-Fun to Use 


-Customizable 

_.i5»sis==- 

-and many more... 

Contact Me @ Oil 000 1111 to do the same 4 UL 


The homepage (the frontpage of your website) is where you and your company get to make a 
first impression and we all know what they say about first impressions... It's the first place new 
visitors come and where old visitors come back. You must cater to both types of customers. 
There are a few things that are essential to your homepage and each is explained below. 

Navigation 

Navigation is the most important part of your homepage. It doesn't matter what else is on your 
site, if the visitors cant get there. On your homepage your visitors need to be able to reach ev- 
ery part of your website. Your links on your navigation bars should be the same on every page. 
Your visitor will then know how to get back to whatever page really interested him. When users 
cannot find what they want they simple look at another site. This is a fact Your links on the navi- 


About Us 
Privacy Policy 
Terms & Conditions 


Search 


RECENT POSTS 

Tips for Keeping Your Blog Up to Date 
Design Elements of a Blog 
Maintaining a Successful Blog 


I Designing Your Own Website 


D 


64 | P a g e 


BestWordPressThemes. co.za 









Insert a Contact Form 

Contact Forms are a great way for your customer to get hold of you. As previously discussed, its beneficial to add an 
address if you can, in order for the trust level to increase. 

Contact Form 7 is a free add-on for WordPress. It's highly customizable and can be used for many purposes. However, 
for the tutorial you will only add a basic contact form. 


I LJ Plugins < My First Website — WordPr... x | [ J My First W ebsite | Just another Word... | + | 
^ ® localhost wp-admin/plugins.php 


|£|i Most Visited [J Getting Started [ifeji Latest Headlines I Of Lorem Ipsum - All the ... 


My First Website 


Dashboard 
jfr Posts 


Plugins 


Add New 


^ Media 
(| Pages 


All ( 2 ) | Inactive ( 2 ) 

Bulk Actions Q Apply 


Plugins/lnstalled Plugins/Add New 


Go to: 

Plugins/lnstalled Plugins/ Add New 
Click on Add New 


W Comments □ Plugin Description 


jr Appearance 

□ Akismet Used by millions, Akismet is quite possibly the best way in the world to protect you 

h Activate | Edit | Delete Click the "Activate" link to the left of this description, 2) Sign up for an Akismet API k 

B Version 2.5.7 | By Automattic | Visit plugin site 


[installed Plugins ] 

Add New 
Editor 

Users 

Tools 

□ Hello Dolly This is not just a plugin, it symbolizes the hope and enthusiasm of an entire generat 

Activate | Edit | Delete lyric from Hello, Dolly in the upper right of your admin screen on every page 

Version 1 .6 | By Matt Mullenweg | Visit plugin site 

□ Plugin Description 


Settings 

Bulk Actions Q Apply 

◄ Collapse menu 



Search for the following Plugin by the author: 


| [ j Install Plugins < My First Website — ... x | [_ J My First Website | Just another Word... | + | 

localhost ’wp-admin/plugin-install.php?tab=search&s=ccintact+form+7&plugin-search-input=Search+ Plugins 



Dashboard 
^ Posts 
% Media 
(| Pages 
Comments 
jg] Appearance 


Installed Plugins 

Add New 

Editor 

Users 

Tools 

1TTI Settings 

< Collapse menu 


Search Search Results | Upload | Featured | Popular | Newest | Favorites 

Keyword [*] jcontact form 7 Search Plugins 


Name 


Contact Form 7 


Details [[install Now] 


Click on Install Now 

Contact Form by vCita 

Details | Install Now 


Custom Contact Forms 

Details | Install Now 

Contact Form Manager 

Details | Install Now 


Version Rating 


3.3.3 


1.2 


Description 


Contact Form 7 can manage multiple contact forms, plus you can customize the form and tl 
form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on. 

Docs & Support 

You can find docs, FAQ and ms detailed information about Contact Form 7 on contactforr 
your question on the FAQ... E jyTakayuki Miyoshi. J 

y Cita Contact Form is a simple, free and easy-to-use WordPress contact form plugin 
Use our well-designed Contact Form plugin, and tailor it to your specific needs and style. 
Customize almost every aspect of your contact form, no HTML knowledge required. 
Contact Form Key features: 

Friendly and intuitive contact form 

Well designed and professional looking contact form 

fully flexible contact . By vCita.com. 

irklckt? Attention: Custom Contact Forms really needs support from developers. We need code cor 
plugin on Github and create push requests! 

Customize every aspect of your forms without any knowledge of CSS: borders, padding, sii 
captchas, tooltip popovers, unlimited fields/forms/form styles, use a cust. .. By Taylor Lovett 

A quick look into Contact Form Manager 

★ HTML editor to design contact form content 

★ Customize contact form fields without renlacinn shortcode evervtime 





k 


nu 


Are you sure you want to install this plugin? 

ub 



tor 





OK ] ( Cancel j 

y 

k 


5, 





Once the Plugin is located, click on the Install Now and if prompted "Are you sure 
you want to install this plugin" - Select OK. 
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The following screen will appear: 


| : f_J Plugin Install < My First Website — W... x | [,J My First Website | Just another Word... 


^ ® Iocalhost wp-admin/update.php?action=install-plugin8iplugin=contact-form-7&_wpnonce=lb9fl3a90d 


Most Visited [..] Getting Started |&|i Latest Headlines for Lorem Ipsum - All the ... 


My First Website 


^ Dashboard 
jfr Posts 
Media 
(p Pages 
- Comments 


frl Appearance 


Installed Plugins 

Add New 

Editor 

^ Users 
Tools 

m Settings 

« Collapse menu 


Installing Plugin: Contact Form 7 3.3.3 

Downloading install package from http://downloads.wordpress.org/plugin/contact-f 
Unpacking the package... 

Installing the plugin... 

Successfully installed the plugin Contact Form 7 3.3.3 
^Activate Pluqirj Return to Plugin Installer 

| Activate this plugin | 


Posts 
Media 
(| Pages 
L - Comments 


C 


Contact 


Appearance 


After installation, select Activate Plugin. 

Note: Once you click Activate Plugin, a new tree view to the left 
pane will be created with the name Contact. 


0 Plugins 


Installed Plugins 

Add New 
Editor 


: Users 

Tools 

fg7| Settings 


The plugin installed successfully and you are ready to create the contact form. 
Go to: Contact/Add New 


ij Contact Form 7 • My First Website — ... * \ [ - My First Website | Just another Word... | + | 


^ localhost'wp-admin/admin.php?page=wpcf7 


fe Most Visited [_] Getting Started [&[i Latest Headlines lor Lorem Ipsum - All the ... 


My First Website 


^ Dashboard 
gf Posts 
^ Media 
t Pages 
Comments 

l 

1] Appearance 
? Plugins 
- Users 


S Contact Form 7 Add New 


Bulk Actions □ Apply Go to Contact/Select Add New 

□ Title 


Bulk Actions Q Apply 


Shortcode 


0 

Contact form 1 

[contact-form-7 id="87’ title-’Contact form 1”] 

□ 

Title 

Shortcode 


'fj Tools 
[f?| Settings 

* Collapse menu 


Select the language of the form: 
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The Contact Form: Part 1 



Contact Form 7 

Contact Us Rename the Form to something You choose. 


r Fonn A 

r t 

<p>Your Name (rsguiredK&t > 

[text* your-name] <p> 

<p>Your Email (required)^ > 

The actual form that will be displayed on the 

<p>5ubject<tg t> 

(text your-5ubje<x] </p> website. It uses HTML so the output will not look 

<p>y«* M essaged /> the sam e as it is here. 

&S&S5SS your-message] </p> 

<p>fsubmit "Send*l</p> 

1 Generate Tag - 1 

Generate Tag: 

Here you create different types of functions to be associated 
with the contact form. 


/Slail 


Email Yourself! 


contact form on My First Webi 



Select HTML Content Type - This will display the page correctly in 
email programs like MS Outlook 


Email 1: 

Once the visitor hits submit, you will receive a email with 
the information gathered in the form. 


The Contact Form: Part 2 


{MajHsJ 


[g] Use mail (2) 

Email the Visitor 

To: 

Message body: 

[your-email] 

Message body: 

From 

[your-message] 

[your-name] <(your-email]> 

- 

Subject: 

This mail is sent via contact form on My First Website http://localhost 

Mail 2: 

(your-subject] 
Additional headers: 

File attachments: 

When Mail 2 is selected, the visitor will also receive an email from the 
website saying anything like; Thank you for Contacting Us etc. The 
message is up to you, you can offer something or direct the visitor to 
another page etc. If you don't want emails to be send to the visitor, 

|r1 Use HTML content type 

untick Mail 2. 



Editing the Contact Form 

<p>Your Name (required)<br /> 
[text* your-name] </p> 
<p>Your Email (required)<br /> 
[email* your-email] </p> 
<p>Subject<br /> 

[text your-subject] </p> 

<p>Your Message<br/> 

[textarea your-message] </p> 

<p>[submit "Send"]</p> 


Note: *Must be filled in! 

Editing Email 1 - The Email that will be send to you! 


Form 

<p>Your Name (required)<br /> 
[text* your-name] </p> 

<p>Your Email (required)<br /> 
[email* your-email] </p> 

<p>Subjed<br /> 

[text your-subject] </p> 

<p>Your Message<br /> 
[textarea your-message] </p>| 


Default Set of Questions: 

- What is Your Name? 

- What is Your Email Address? 

- What is the Subject/Topic? 

- Write Your Message 

- When Done - Click Send! 


<p>[submit "Send"]</p> 


For a basic contact form, this will do. 
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Mail 



Editing Email 2 - The Email that will be send to you! 

Mail (2) 

H Use mail (2) 

Message body: 

Message body: 

[your-message] 

From: 

[your-name] <[your-email]> Fill in a name and leave <[your-email]> 

This mail is sent via contact form on My First Website http://localhost 

Subject: 

[your-subject] Enter the Subject - Notify Them Why They Responded 

[your-Message] 

Additional headers: 

The visitor will only receive the message part of the reply. 

File attachments: 

Q se HTML content type Remember to check this Box for HTML display. 


-To: 

[your-email] Email to Visitor once they leave a message. 


For a basic contact form on the website the default settings will do. Save the changes made! 


^ Dashboard 
Posts 


Contact Form 7 


Screen Options ▼ 
Docs - FAQ - Support 



Contact Us 


Always Save after Editing. When you get familiar with contact form and start 
designing more complex and longer version forms, it's important to Save from time to 
time. Something may go wrong and you will have to start from scratch! 


Now, after saving the following will appear: 


(^) My First Website ^ + New 

Howdy, Website Administrator 


^ Dashboard 
Posts 
Media 


Contact Form 7 Add New 


Screen Options ▼ 
Docs - FAQ - Support 


Contact form created. 


m Pages 

^ Comments 



§5 Appearance 
0 Plugins 
^ Users 


H Tools 
0 Settings 

4 Collapse menu 


Note: Copy this code to: 


-Page 

Contact Us Post 

nr 

Copy | Delete 

(copy this code and paste it into your post, page or texj^vidget content ^ Text Widget! 


[ [contad-form-7 id="89" title-'Contad Us'] | 

^ J Copy this code to the Contact Page! You have 


already Saved the form, it's safe to navigate away 
from this window. 


Form 

▼ 


<p>Your Name (required)<br /> Generate Tag ▼ 

[text* your-name] </p> 


<p>Your Email (required)<br/> 


When you are happy and the form is completed and saved, a code will be generated for you. You need to copy this code 
to the page that you want the contact form to appear, in this case, the Contact Us Page. 

Changes can be made to the form at any time, just remember to save the changes and to copy the new generated code 
to the page by replacing the older one. 


Do the following: 
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Contact Us 


(£ 


: npy thiQ rrtHo stnH p asts if intn y qi ir p nc t n a g° or text widget content. 


[contact-form-7 id- 'S9' 1 title-'Contact Us" 


Select & Copy 



Form 

<p>Your Name (required)<br /> 
[text* your-name] </p> 

<p>Your Email (required)<br /> 
[email* your-email] </p> 


[ £°py ] 

Delete 


Select All 

Add a Keyword for this Search., 

Inspect Element [Q] 

^ Download with IDM 

Download all links with IDM 

" " Inspect Element with Firebug 


<p>Subject<br/> 

Go to Pages/All Pages/Edit Contact Page: 



Bulk Actions Apply Show all dates [*] 

□ Title 

□ About Us 

□ Blog 

Edit the Contact Page 

□ Contact Us 

[ Edit ib uick Edit | Trash | View 

P De j Edit this item | ur Own Website 

□ Privacy Policy 


Add New 

^ Comments 
[B l Contact 

@0 Appearance 
0 Plugins 
<8^- Users 
Tt Tools 
1771 Settings 
+ Collapse menu 

Replace all the current text with the code that you copied. (Do this by copy & pasting). 


All Pages 

Add New 

^ Comments 

jfcl Appearance 
0 Plugins 
Users 
'|f(; Tools 
|7j Settings 
I @ Collapse menu 


Contact Us 


Permalink: http://localhost/?page_id=12 

Change Permalinks View Page 


•fij Add Media 



Visual Tei 

b / link b-quote del ins img 

ul ol li code more lookup close tags fullscreen 



| [contact-form-7 id=“89" title="Contact Us" 


jj- 





[ Paste 


Delete 

Select All 

V Check Spelling 
Languages 
Inspect Element (Q) 

V Download with IDM 
Download all links with IDM 
Inspect Element with Firebug 


Paste the code within the Contact Us Page! 
Save Changes & view the Contact Page. 


Viewing the Contact Page: 
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CONUCTIM MOOUCI5 


This is My First Website I Designed. 

Affordable Web Design! 

-Easy to Use 
-Fun to Use 
-Customizable 



Contact Us 

Permalink: http 

://localhost/?page_id=12 Change Permalinks View Page 

1 _ 

Add Media 

b / link 

b-quote del ins img ul ol li code more lookup close tags fullscreen 


Thank you for taking the time to contact us. We will get back to you shortly. 

You can visit our store as well: 

Street Name & Number 

Suburb 

Town Name 

Country 

Postal Code 

Fill out the form below and click Send. 

[contact-form-7 id="89" title=”Contact Us M ] 


Add some text at the top of the code: 


Save the page again after editing & view to see 
changes. 


View after editing: 


This is My First Website 1 Designed. 



Affordable Web Design! 

-Easy to Use 
-Fun to Use 


-Customizable 


-and many more... 

Contact Me (S> Oil 000 1111 to do the same 4 U !, 


Please Note: If you want to test the contact form, wait until you 
upload it to the internet. I've not yet get it to work with WAMP 
Server, only online! 


Contact Us 

Thank you for taking the time to contact us. We will get back 1 



You can visit our store as well: 

Street Name & Number 

Complete Basic Contact Form. 

Town Name 
Postal Code 

fill out the form below and dkk Send. 

Your Name (required) 



tainine a Successful Bloe 


Change both Email 1 & Email 2 with your own email address. This 
way you can test the form without sending emails to visitors. If 
you are satisfied, change back to the settings that will ensure the 
visitor as well as you receive an email. 


Your Email (required) 


Subject 


Your Message 


Ianuarv2013 


. My^Vy ebF t e 

Uncategorized 
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Insert a Slider on the Home Page 

Sliders can be used for various reasons. You can display ads , new products, promotions and the slider enhances the 
overall look of the front page (website). 

First, remove the Header Image from the front page: 

Do the following: Go to Appearance/Header 


Dashboard 
jP Posts 
Media 
£) Pages 
(p) Comments 
Q Contact 


a Custom Header 

Header Image 


Remove 


Widgets 

Menus 


Editor 

Plugins 
Users 
"fj Tools 
[IT] Settings 



Suggested width is 960 pixels. Suggested height is 250 pixels 

Choose an image from your computer: 


Or choose an image from your media library: 


Choose Image 


Uploaded Images 


You can choose one of your previously uploaded headers, or show a random one. 


This will remove the header image. You will not be able to restore any customizations. 


»i™ae ] Click on Remove Header Image. 


Header Text 
Header Text 


[Tl Show header text with your image. 


Save changes! 

After saving changes, navigate to Plugins and do the following: 


My First Website 


Dashboard 

Posts 
Ggj Media 
(P Pages 
<P Comments 
\B\ Contact 
@ Appearance 


^ Plugins 


Installed Plugins 


^ Users 

Tfl Tools 

|T¥j Settings 

<• Collapse menu 


Pluginsf TdcuZI^ 

All (3) | Active (1) | Inactive (2) 

Bulk Actions [*] Apply 


Click on Add New. 


□ 

Plugin 

Description 

□ 

Akismet 

Activate | Edit | Delete 

Used by millions, 
to the left of this i 



Version 2.5.7 | B^ 

□ 

Contact Form 7 

Settings | Deactivate | Edit 

Just another coni 
Version 3.3.3 | B\ 

□ 

Hello Dolly 

Activate | Edit | Delete 

This is not just a 
the upper right ol 



Version 1 .6 | By h 

n 

Plugin 

Description 


Bulk Actions 


Apply 
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search For: Soliloquy Lite by Thomas Griffin 

Do the following: 


My First Website 


fjj Dashboard 
$ Posts 
C§Jj Media 
|0 Pages 
Comments 
|al Contact 
g Appearance 


Installed Plugins 


[Add New^ 

Editor 

^ Users 
li Tools 
[HI Settings 

■ < • Pnllarw 1 m^nn 

Install the Slider: 


0 ' Install Plugins 


Search | Upload | Featured | Popular | Newest | Favorites 

Plugins extend and expand the functionality of Word Press. You may automatically install plugins from the WordPress Plugin Director 


Search 


Soliloquy Lite 




search Pl ugins Search for Soliloquy Lite 


Popular tags 

You may also browse based on the most popular tags in the Plugin Directory : 


admin AJAX buddypress category 


comment 


comments content email Face book feed flash 


jquery link links media paQ8 pages photo photos plugin Post posts res seo she 
video widget widgets word press youtube 


My First Website 


Dashboard 
Posts 
C°jj Media 
(£J Pages 
£) Comments 
(B| Contact 
0 Appearance 


Installed Plugins 

Add New 

Editor 

^ Users 
Ti Tools 
[i?] Settings 

< Collapse menu 


Install Plugins Install the Slider 

Search | Search Results | Upload | Featured | Popular | Newest | Favorites 


Keyword [▼ [Soliloquy Lite 
Name 


Search Plugins 


Version 


Rating 


Description 


[soliloquy Lite Responsive Image Slider 

[Details | Install Now Click Install Now 


1.3.0 


Soliloquy is by far the best responsive 
security and features the easiest to u: 
create an infinite number of response 

Toolharl ^ nsta *l Soliloquy Lite Responsive Image Slider 1.3.0 

Details | Install Now 

Jl.6.0 


Quick Access to Genesis Framework 
This plugin just adds a lot Genesis Fr 
life for webmasters a lot easier. So yo 
'Genesis Simple Hooks.. By David De 

Name 


Version 

Rating 

Description 


This is a free working Slider, however, more 
options are available in the Pro version. 


When prompted, select OK. 




| 

OK 

j 

I Cancel 


lajii yuui iiicuid luehci.ii me way yC 
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The plugin will install after selecting OK. Once installed, select activate plugin for changes to take effect. Again (same as 
Contact Form 7) a left panel will be created with the name 'Soliloquy'. 


Dashboard 
Posts 
C°j) Media 
C Pages 


<£) Comments 
(B| Contact 
g Appearance 



Installed Plugins 

Add New 

Editor 


<!£> Users 
TS Tools 
[Sf] Settings 

■* Collapse menu 


Installing Plugin: Soliloquy Lite Responsive Imal 

Downloading install package from http://downloads.wordpress.org/plugin/soliloquy-lite 
Unpacking the package... 

Installing the plugin... 

Successfully installed the plugin Soliloquy Lite Responsive Image Slider 1.3.0 


After Installing, Activate Plugin! 
Once activated, a new left panel will 
be created with the name 


My First Website 



Installed Plugins 



Go to Soliloquy in the left panel. 

Let's use the default and edit it. Click on Edit (Image Slider 1) 

Q Soliloquy Add New 



^ Want full access to all available Soliloquy features? Click here to upgrade Soliloquy now! J If you like it, buy it! 


All | Published (1) 

Bulk Actions [£] Apply Show all dates [▼] Filter 
B Title Shortco 


□ Ima ge Slider 1 

[Edit] Trash Click on Edit... 

I Edit this item | 

D Title 


Bulk Actions [▼] Apply 



if ( function_exists( 

’ soliloquy_slider ’ ) ) 
soliloquy_slider( ’104' ); 

Function 


Number of Images 


Number of Images 


Last Modified 

January 22, 2013 


When you copy this code to any page whatsoever, the slider will display on that page. 

When creating a new slide, a new code will be generated. Copy that code to the page on 
which you wish the slider to display. 

This way you can insert several different slides within the website, all with different 
pictures. 


Editing the "Image Slider 1": 


Note: 

With this slider, you can insert a few pictures per slider. Just remember that each slider has its own shortcode that 
needs to be placed on a page or post. (The place where you want it to display). 


fs) Dashboard 
& Posts 
G§& Media 
Jp Pages 
<p> Comments 
HI Contact 
!Q Appearance 
$ Plugins 
Users 

T5 Tools 

UH Settings 


Edit Soliloquy Slider Add New 

Want full access to all available Soliloquy features? Click here to upgrade Soliloquy now! 


Screen Options ▼ Help 


Image Slider 1 


Give the Slider a Title - In this case - Home Page Slider 


Upload and Customize Images 

Click on the button below to select and upload your images. Once your images hi 


sn uploaded, you can customize their properties and sort them according to your needs. The images will appear below the upload button as thumbnail versions of their 


Click Here to Upload Images 


J Upload 5 images with a dimensions 600 x 250 
You can use any size you want, make sure 
it's the same as 


SliderTransition 

fade 


Slider Speed 

[ 7000 

Value Is calculated using mi///secorKteJ 

Animation Duration 

[ 600 

Value is calculated using milliseconds J 


Width: 600px 

Height: 250px 


The pictures that will be uploaded are 600x 250 
Remember to Change! 


J Wait 7 seconds untill the next slide loads. 


ra animations, custom slider sizes registered with Word Press and smooth height controls. 


After inserting all the images you want. Save by 
clicking on Update. Select this code and copy the 
code to the Home Page! 


(Each New Slider will 
give a different Code) 


Status: Published Edit 


Visibility: Public Edit 


|u] Published on: Jan 22, 2013 @ 13:41 Edit 

Move to Trash 



Upgrade Soliloquy 


Do you want to experience Soliloquy at its f 
potential, have complete control over your 
sliders and receive rock-solid support? 

Click here to purchase vour upgrade for 
Soliloquy and unleash the power of the bes 
responsive WordPress slider plugin on the 


Soliloquy Instructions 

You can place this slider anywhere into your 
posts, pages, custom post types or widgets I 
using the shortcode below: 


I |~ [soliloquy id=" 104 "] ~] I 

' can aiso p i aee ffl i s~ sTi5eri 

template files by using the turn 
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Do the following: 

Get 5 images with a size of your choice. For the lesson, 600px x 250px will be used. 

Do the following: 

Click the button "Click Here to Upload Images" to upload images from your computer to use as slideshow images. 


|^| Contact 

||S| Appearance 
0a Plugins 
^ Users 

Tfl Tools 

[W] Settings 



Upload and Customize Images 

Click on the button below to select and upload your images. Once your image 
thumbnail versions of their actual size. 



The following window will show. When the text field is empty, nothing is selected for upload. 


Upload Your Images 


From Computer From URL 

Add media files from your computer 


f Empty ]^Browse_ ] Upload Cancel 


You are using the browser's built-in file uploader. The WordPress uploader includes multiple file selection and drag and 
drop capability. Switch to the multi-file uploader . 

Maximum upload file size: 2MB. 


Click on Browse to search for the images you created for the 
slideshow. 


Locate the images folder and select the first image of the slideshow and click Open. 


.3 Libraries 
Q Documents 
Music 

Q Pictures 
B Videos 
4$ Homegroup 
ft BabbaT 
Computer 

L^Locamisk^J 

Games 

Intel 

Ji PerfLogs 
Ji Program Files 
j Program Files (x86) 
Ji RaidTool 

J Users 
M wamp 

it apps 

Jki bin 
lit logs 

+ ¥ SCrl P 15 


, temp websites 
^ myfirstwebsite.ee 
Jti images 




Ju tmp 

|www 
£ Windows 


^ • 

Slider Image 2 Slider Image 3 Slider Image 4 Slider Image 5 


Select the first image and click 'Open' 


Filename: Slider Imagel 
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The following window will show. 


Upload Your Images 


From Computer From URL 


Add media files from your computer 




:\wamp\temp website! Browse_ 


J Browse_ l^^^^^ ^ancel 


You are using the browser's built-in file uploader. The WordPress upl 
drop capability. Switch to the multi-file uploader . 


Maximum upload file size: 2MB. 


Note that the text field is not empty anymore. 
Click Upload to save the picture to WordPress 
Media Library. 


The following window will show. Scroll down to the bottom and select Save Changes. 



The window will load again after you've done the above step by Saving Changes. Just close the window. (Already Saved) 



Edit Image 

Title * Slider Image 1 

Alternative Text 

Alt text for the image, e.g. Ihe Mona Lisa“ 


Caption 


Image Link 
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The first picture is uploaded. Go ahead and upload the second picture by repeating the previous step. (Click on "Click 
Here to Upload Images/Browse/Select Image/Click Open/Click Upload etc...". Upload all 5! 


m 

Dashboard 
Posts 
C§jj Media 
(£] Pages 
(p) Comments 
(g Contact 

§3 Appearance 
$ Plugins 

Ti Tools 
[I?] Settings 


Edit Soliloquy Slider Add New 

Want full access to all available Soliloquy features? Click here to upgrade Soliloquy now! 

Home page Slider 

Upload and Customize Images 

Click on the button below to select and upload your images. Once your images have been uploaded, you can customize their properties and sort them according to your nee 
thumbnail versions of their actual size 



M"he first picture is uploaded. Now, upload the second 
picture by clicking again on "Click Here to Upload Images" 


1st Upload 


Soliloquy Settings 


When all is done you should have at least 5 images attached to the slider. The slider will not show on the home page 
yet, you need to copy the code to the home page. 


(£} Dashboard 
Posts 
C°)j Media 
[P Pages 
£5 Comments 
[g Contact 
g Appearance 
0 Plugins 
Users 
T! Tools 
@f] Settings 


Soliloquy 

Add New 


f I Edit Soliloquy Slider Add New 

Want full access to all available Soliloquy features? Click here to upgrade Soliloquy now! 


Home page Slider 

Upload and Customize Images 

Click on the button below to sele 
thumbnail versions of their actual 

Click Here to Upload Images 



5 Images Uploded. 


Soliloquy Settings 


Slider Size 


The relative size of the slider in pixels (width * height) Click here to team more 

fade H 

7000 Value is calculated using milliseconds. 

600 Value is calculated using milliseconds. 


Note: The slider will NOT show before the ( 

code is copied to the Home Page. 


Howdy, Website Administrator 


Screen Options v Help * 


Dismiss this notice 


Slider Transition 
Slider Speed 
Animation Duration 

For even more advanced functionality like ajax preloading, embedded video support, controlling mousewheel and keyboard navigation, pause/play elements, extra animations, custom slider sizes registered with 


Publish 

Status: Published Edjt 
Visibility: Public Edit 

[u) Published on: Jan 22, 2013 @ 13:41 Edit 
Move to Trash Save | 

Upgrade Soliloquy 

Do you want to experience Soliloquy at its 
full potential, have complete control over 
your sliders and receive rock-solid support? 

Click here to purchase your upgrade for 
Soliloquy and unleash the power of the 
best responsive WordPress slider plugin on 
the market! 


Soliloquy Instructions 

You can place this slider anywhere into your 
posts, pages, custom post types or widgets by 
using the shortcode below: 


I [soliloquy id="104"] 


You can also place this slider into your template 
files by using the function below: 

if ( function_exists( 

'soliloquy_slider' ) ) 
soliloquy_slider( '104 1 )j 


Soliloquy Instructions 


You can place this slider anywhere into your 
posts, pages, custom post types or widgets by 
using the shortcode below: 



Copy Code 


if ( func 
' soliloquy 
soliloquy. 


Search Google for "[soliloquy id="..." 
View Selection Source 

Inspect Element (Q) 





Download with IDM 
Download all links with IDM 

Inspect Element with Firebug 


Copy the code by selecting the code, right clicking and select copy. 


Remember to click Update to Save Changes. 


Go to Pages/All Pages/Edit Home Page (Design Your Own Website). 
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Paste the code at the top of the page before the paragraph starts. This will ensure that the slider will be on top of the 
text. Save Changes to take effect. 


(Q) My First Website ^ + New 


Dashboard 

[L PageS Add New 
All (7) | Published (7) 

& Posts 
Cg); Media 


k Bulk Actions [▼] Apply Show all dates [▼] Filter 

FaII Pages 1 

□ Title 

Add New 

[T{ About Us 

<£> Comments 


(g Contact 

□ Blog 

g Appearance 
$ Plugins 

[r] Contact Us 

Users 
T8 Tools 

□ Designing Your Own Website 

jEd^J Quick Edit | Trash | View Home Pa g e 

(M) Settings 

O ^ r *| Edit this item | 

£) Soliloquy 

[r] Products 

< Collapse menu 



[r] Terms & Conditions 

□ Title 

Bulk Actions [▼] Apply 



Collapse meni 


Edit Page Add New 

Designing Your Own Website (Home Page) 

Permalink: http://localhost/ [ View Page 


Add Media Q Add Slider 

b / jink b-quote del ins img ul ol li code more lookup close tags fullscreen 

[soliloquy id="i04”]| 1 Paste the code at the top! 

page of your website)</em> is where you and your company get to r 
place new visitors come and where old visitors come back. You must cater to both types of cu: 

<strong>Navigation</strong> 

Navigation is the most important part of your homepage. It doesn't matter what else is on yoi 
every part of your website. Your links on your navigation bars should be the same on every p< 
users cannot find what they want they simple look at another site. This is a fact. Your link; 

<strong>Branding</strong> 

Branding is another essential element for you homepage. I am sure that your small business he 
be posted in a predominant place on your website too. We all know that branding is words or • 
product/service. Showing your logo on your homepage reminds users exactly where they are. 


<strong>Content</strong> 

Last but not least is content. Content is also very important. You must remember to write y< 
website and the visitor. Your homepage content must be fresh and interesting to make them war 
Also, you will want to include in layman's terms exactly what you or your company does. You 


Word count: 429 


Save Changes & View Website! 


Viewing Changes! The slider has 5 images rotating every 7 seconds with a fast transitional phase. 


HOME BLDG CONTACT US PRODUCTS 



Designing Your Own Website 


The homepage (the punt page of your website) is where you and your company get to make a 
first impression and we all know what they say about first impressions... Ifs the first place new 
visitors come and where old visitors come bade. You must cater to both types of customers. 
There are a few thirds that are essential to your homepage and each is explained bellow. 

Navigation 

Navigation is the most important part of your homepage. It doesn't matter what else is on your 
site, if the visitors can't get there. On your homepage your visitors need to be able to reach ev- 
ery part of your website. Your links cm your navigation bars should be the same on every page. 
Your visitor will then know howto get back to whatever page really interested him. When users 
cannot find what th^r want they simple look at another site. This is a fact Your links on the navi- 
gation bars should also be simple (one or two wards) but descriptive. 

Brand i ng 

Branding is another essential element for you homepage. I am sure that your small business 
has a logo and its pasted on everything you can findL to promote your business. Weill, it should 
be posted in a predominant place on your website too. We all know that branding is words or a 
mark of a company (such as a logo) that shows the consumer tine identity of the producer of the 
product/service. Showing your logo on your homepage reminds users exactly where they are. 

Content 

Last but not least is content Content is also very important You must remember to write your 
content like you are speaking to your visitor as irt creates a better connection between your web- 
site and the visitor. Your homepage content must be fresh and interesting to make them want 
to read mare of your site. You might create Jinks to the i nside of your site in the text. Also, you 
will want to include in layman's terms exactly what you or your company does. You would be 
amazed how many websites you have to searrih to find out what their purpose is. 

These things should get you started on building your homepage. There is one rule that I have 
lea rned. It is the KISS rule (Keep it Simple Student^ Your homepage does not need to be flashy 
with all types of images, and flash design, or blinking. Most people like sites when they are sim- 
ple and easy to understand. You must remember who your audience is. Therefore you need to 


About Us 
Privacy Policy 
Terms & Conditions 


Search 


RECENT POSTS 

Tips for Keeping Your Blog Up to Date 
Design Elements of a Elbe 
Maintaining a Successful Blue 
Promoting Your Blog 
Learning about Blogging 


RECENT COMMENTS 

Website Administrator on Maintaining a 
Successful Blog 


ARCHIVES 

January 2013 


CATEGORIES 

My First Website 
Unrategorized 


You can insert as many sliders as you want. Each slider can accept several images. Just remember that each slider has its 
own shortcode. That code needs be inserted in the particular page/post where it should be shown. 
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The picture of the Front Page above displays the slider within the "Content' area. This is a good indication that this 
slider can be used in the blogging area. Why not create a slider that displays the full width of the page at the top of the 
page, within the header section. 

(These days, most Custom Themes comes with a variety of sliders as per default settings. You only need to assemble all 
the information, change the layout options and the website is set.) 

Anyway, see what you did to create the slider: 

You... 


• Designed 5 images with dimensions of 600 x 250 pixels. 

• Created a new slideshow and gave it the name Home Page Slider. 

• Uploaded 5 images to attach to the slider. 

• Changed the slider settings to correspond with the image sizes. 

• Set the slider speed and animation duration. 

• Copy & Pasted the shortcode to the Home Page (Design Your Own Website). 

• Viewed your saved changes. 

In the following lesson you will be shown how to insert the slider within the header section of the website. 


[Back to Top) 
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Insert Header Slider 

Insert and display the slider within the header section. 

First, create a new slider by following the exact same steps as previous. Only this time make the sizes as follows: 

Width: 1000 pixels 
Height: 250 pixels. 

Again, a total of 5 images will do. After uploading the images to the newly created image slider, do the following: 



Q Add New Soliloquy Slider 

Screen Options * Help * 

Want full access to all available Soliloquy features? Click here to upgrade Soliloquy now! 

Dismiss this notice 


Header Slider Step 1 - Give a Title 

Upload and Customize Images 

Click on the button below to select and upload your images. Once your images have been up 
Click Here to Upload Images Step 3 - Upload 5 images 

•V 1 M 1 *** 1 • ✓ 


id, you can customize their pr 


is and sort them according to your needs. The images will appear be 


Publish 
Status: Draft Edit 
Visibility: Public Edit 
|u| Publish immediately Edit 
Move to Trash 


Do you want to experience Soliloquy at its 
full potential, have complete control over 
your sliders and receive rock-solid 

Click here to purchase vour upgrade for 


Slider Transition 
Slider Speed 


The relative si; 
fade^ 


* 250 step 2- Change Dimensions 

he slider in pixels (width * height) Click here to learn more 


Soliloquy Instructions 

(for pages/posts) You can place thjs slkler anywhere “ your 

s, custom post types or widgets by 
using the shortcode below: 




ta-] 


re advanced functionality lik 


Value is calculated using milliseconds. 

embedded video support, controlling mousewheel and keyboard navigation, pause/play elements, extra animations, custom si 


Step 4 - Copy Code„ 

th WordPress and smooth height coni 


Step 1: Give a Title 
Step 2: Change Dimensions 
Step 3: Upload Images 
Step 4: Copy code 

Save Changes! 

Note: 

This is the code (Step 4): 


if ( function_exists( , solMoquy_slider' ) ) soliloquy_slider( '124' ); 

This code will NOT work, it need PHP tags. (In green) 

<?php if ( function_exists( 'soliloquy_slider' ) ) soliloquy_slider( '124' ); ?> 
Do the following and navigate to: Appearance/Editor/header.php 


t£} Dashboard 

[ Edit Themes ^ 

* P(M * 

Twenty Twelve: Heade|(b^ [ 

qs Media 

C p»9«* 

<7php 

Comments 

L J 


Edit header.php 




* Displays all of the <head> section and everything 

* ^package WordPress 

* psubpackage Twenty.Twelve 

* pslnce Twenty Twelve 1.6 


<div io»"«ain*> 


Widgets 

Menus 


I fc'Trtcr | 


<£, Users 
Ti Toots 
0 Settings 
O Soliloquy 


?>< tOOCTYPE ht«l> 
<l--tlf IE 7J> 
cntwl class*"ie It 
cl [endif]- -> 
cl--[lf IE «1> 


< I [ endif ]--> 

cl~(if I (IE 7) | I (IE 8) )><!--> 
<nt«l <?php language_attrlbutes()i 
<l--ct[endlf]--> 


r* <?pt)p language_attributes(); ?» 


cweta charset**< ?php bloglnfol 'charset' ); ?>“ /> 

teeta na»e*“vlewport- centent**widtn*device-wldth" /> 

ctltlexfphp wp_tltle( ' | . true, 'right' ); ?x/tltle> 

clink rel*-proflle* href»"http:/reeipg.org/xfn/ll'' /> 

clink relv'pingback* href*“c>php bloginfot 'pingback.url' ); »• /> 

c?php II Loads MTHL5 JavaScript file to add support for HTMLS elenents in older IE versions. ?> 
cl--[if It IE 9]> 

c script src»"< Jphp echo get_tenplate_dlrectory_url( )j »/ Js/ht«15. js" type* ‘text / Javascript “ x /scripts 
cl (endif J— > 

Ophp wp.headO; » 


Documentation: FunOonName 0 Lookup 


Scroll Down 



’ Website Admmist 


B 


Select theme to edit: Twenty Twelve [w] Seiec 

Templates 

1 4IM Template 

HOtpnp) 




Ajuthor Template 

Category Template 

(category pne) 


coMenHmage php 
content kni: php 
content-none php 


contentstatus php 


Make sure you clicked this file! 


Oc 


Image Attachment Template 


Main indei Template 


o 


O 


Front Page Temptale Page 
Template 
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Make sure you selected the header.php file for editing. Copy the code and paste it to the Above Menu or Underneath 
Menu position. The choice is yours! 


£) Comments 
|g Contact 


Themes 

Widgets 

Menus 

Header 

Background 

Editor 

$ Plugins 
^ Users 

Ti Tools 

(13 Settings 
Q Soliloquy 


<! — [if It IE 9]> 

<script src="<?£hg echo get_template_directory_uri(); ?>/js/html5. js'' type="text/javascr^gt”x/script> 

<![endif]-> 

<? £lie wR_head() ; »> 

</head> 

> After the bracket, press Enter to create a new line. 

<body <?£hg body_class()j ?» 

<div id=“page” class=”hfeed site"> 

<header id=”masthead” class=”site-header” role=”banner"> 

"Enter the code here - This will display the slider at the top above the Menu." Above Menu 

<t)SKSMe> 

<hl class=”site-title"><a href="<?ghe echo esc_url( home_url( V ) ); ?>” title^'c’ghR echo esc_attr( getJloginfo( 'name 1 , 'display' ) ); ?>" rel=''home"x? R h£ b] 

); ?x/ax/hl> 

<h2 class=”site-description“x?gh£ bloginfo( 'description' ); ?x/h2> 

<'l 

<nav id="site-navigation” class="raain-navigation" role="navigation”> 

<h3 class=”menu -toggle" X?(jhg _e( 'Menu', ' ' ); ?x/h3> 

< a class=''as^istiye^text" href="#content" title="<? E h e esc_attr_e( 'Skip to content', 'tweotytwel^' ); ?>"x?ghg _e( 'Skip to content', 'twentytweh®' >; ?X/a> 
<?php. yip pay menu( array( ’theme_location ' => 'primary', 'menu_class ' => ' ng v -mgn u ’ ) ); ?> 

</navx!-- #site-navigation --> 


<?(jhg $header_image = get_header_image ( ) ; 
if ( ! empty( $header_image ) ) : ?> 

<a feCSf=”< ? ellR ech ° home JtfCi( ’/■ ) ); ?>"><img src= 

height="< ?ghg echo get custom header ( ) - >height j ?>” alts”” /x/a> 

<?jjhjj endif; ?> 

| "Enter the code here - This will display the slider underneath the Menu." 

</header><! — #masthead — > 

<div id=”main” class=”wrapper''> 


echo esc_url( $header_image ); ?>" class=''header-image“ width=”<?ghg echo get_custom_header()->width; : 

Underneath Menu 


Documentation: Function Name ... 


|g~| | Lookup 


Do the following: 



!□ Edit Themes 

File edited successfully. 


Twenty Twelve: Header (header.php) 


View: Above Menu! 


<?ghg // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?> 

< ! --[if It IE 9]> 

<script src="< ?ghg echo get template directory .u.riQ; ?>/js/html5. js" ty pe=" text/ javascript "></ script > 
<! [endif] -> 

<?£tie «R_head(); ?> Fronts Back 

</head> 


<body <?ghg body_class(); ?» 
<div id="page" class="hfeed site' 


Remember 

cheader id="masthead" class="site-header” role="banner’ 

<j]&s!Ae > 


to Enter^]^?php]?> 


Paste it Here! 


<hl class="site-title”xa href= , ’<? e h B echo esc_uKl( home_url( V ) ); >>” title=”< ?ghg echo esc^attr( get_b 
<h2 class=”site-description"x?ghg bloginfo( 'description' ); ?></h2> 

</hST£Be> 

<nav id=''site-navigation'' class=”main-navigation'' role="navigation”> 

<h3 class=”menu-toggle”x?ghg _e( 'Menu', 'twenty^welve' ); ?x/h3> 

< a class="a«istive^tert" href="#content" title="<?ehe esc_attr^e( 'Skip to content', ); ?>"> 

<? K)J8 wg_nav^_n*enu ( array( 'theme_location' => 'primary', ’menu_class‘ => ■navHjwnu' ) ); ?> 
c/nayx!-- #site-navigation — > 


<?ghg $header_image = get_header_image(); 
if ( ! empty( $header_image ) ) : ?> 

< a feCSf=” <? et!R echo home_url( V ) ); 

height="<?ghg echo get_custom_header()->height; ?>" alt="” /x/a> 

? > 

</headerx!-- ibnasthead — > 

<div id="main" class="wrapper"> 


"xiffig acs=” <? ete echo S£E_y£l( *header_image ); ?>” class 


Documentation: 


i: Function Name... [▼] Lookup 


~J Paste & Save Changes! Preview Website. 


Website Header Preview - Slider Above Menu 



Designing Your Own Website 

The homepage (the front page of your website) is where you and your company get to make a 
first impression and we all know what they say about first impressions. . It’s the first place new 
visitors come and where old visitors come back. You must cater to both types of customers. 
There are a few things that are essential to your homepage and each is explained below. 


About Us 

P ri vac y Po licy 


Search 
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Change the view of the slider to the bottom of the menu: 


$ Posts 


C§g Media 
© Pages 
Comments 


|g] Contact 




Themes 

Widgets 

Menus 

Header 

Background 

Editor 


0 Plugins 
<!g Users 

Ti 16018 

gg Settings 
0 Soliloquy 

'■<) Collapse menu 


File edited successfully. 


Twenty Twelve: Header (header.php) View: Underneath Menu 


<?|)hp // Loads HTMIL5 JavaScript file to add support for HTWlLS elements in older IE versions. ?> 

<1 — [if It IE 9]> 

<script src=”<?£h^ echo get_template_directory_uri() ; ?>/j|s/html5. js" type=”text/^ay^£ri^t”></script> 
<1 [endif]--> 

wR_ head (); ■> 

</head> 

<body <?|jhp body_class(); ?>> 

<div id="page" class= ,F hfeed site”> 

<header id="mast head" class="site-header 1 ' role="banner"> 


<hgroup> 

<hl class=”site-title”><a href=”<?gh^i echo esc_url( homejjrlf ) ); ?>" title=”<?ph£ echo esc_jattr( get 

); ?x/ax/hl> 

<h2 class=”'site-description"'x?ph£ bloginfo( 'description' ) ; ?x/h2> 

<nay id=" site- navigation" class='"'main-navigation" role= , 'navigation”> 

<h3 c la ss="nenu -toggle" X?phg _e( 'Menu'., r twentytwe]^ )j ?x/h3> 

<a class="assistiye^te^ 1 '' href=''#content” title=”<?£hg esc_attr_e( 'Skip to content \ ' twentytwelve ' )j ?> 
<?£hp wp_jTav_ntenu( array( ' theme_location ' => ' primary ' ^ ' menu_class ' => 'nav^nenu' ) )- 3 ?> 

</nay><!-- #site -navigation --> 


<?ghp $header_image = get_header_image () j 
if ( ! empty ( $header_iiraage ) ) : ?> 

<a href=”<?php echo esc_url( home_url( '/' ) )j ?>”ximg src=”<?php echo esc_url( $header_image 
height="<?ph£ echo get_custom_header()->height; ?>" alt="" /></a> 

<?ghp endif^ ?> 

</header><!-- #masthead --> 


<?php if ( function_exists( 'soliloquy_slider p } ) soliloquy_slider( "12S-" } j ?> 


Paste it Here ! 


<div id= ,F main ,F class= ,F wrapper”> 


?>" cla 


Documentation: Function Name... [^j Lookup 


Update File 


Paste & Save Changes. View Website. 


Website Header Preview -Slider Underneath Menu 



Designing Your Own Website Aboutus 

Privacy Policy 

The homepage (the front page of your website) is where you and your company get to make a Terms & Conditions 

first impression and we all know what they say about first impressions... It's the first place new 
visitors come and where old visitors come back. You must cater to both types of customers. 

There are a few things that are essential to your homepage and each is explained below. Search 


Keep it the way you like it. And that's how you add a free slider to your website. For added features, browse Custom 
Themes or add more widgets. Just note that not all slider settings are the same, but you'll manage. 
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Changing the Blog Page for better viewing! 

When you view the Blog Page in its current format, it will be a very long page. The Posts (articles) displays in full text 
summary so it takes a lot of scrolling to reach the next post. Nobody wants to scroll that far 
down! To get a better view when viewing the Blog a few minor changes can be made 
without sacrificing any content. 


For this to take effect, you will have to edit every Blog Post individually. Now that you know 
this, you can edit new Posts that you create immediately before publishing them. 


Navigate to Posts and select to edit the first post: 


f’j Posts < My First Website — WordPress x | [ j Blog | My First Website | Just another ... | + | 



^ localhost/wp-admin/edit.php 




iPji Most Visited [..] Getting Started l^i Latest Headlines lof Lorem Ipsum - All the ... 

@ My First Website p + New 1 

{£} Dashboard 

Posts Add New 

Edit all the Posts! 



[ All Posts ] 

All | Published 1 7 




Add New 

Bulk Actions [^] Apply Show all dates Q 

View all categories [▼] Filter 



Categories 

Tags 

D Title 


Author 

Categories 

Media 
0 Pages 

g Tips for Keeping Your Blog Up to Date 
[Edit] Quick Edit | Trash | View 


Website Administrator 

My First Webl 

□ d Edit this item Q f g B | og 


Website Administrator 

My First Webl 

Comments 



(Ml Contact 

g Maintaining a Successful Blog 


Website Administrator 

My First Webl 

§D Appearance 
Plugins 
{Q Users 
Ti Tools 

□ Promoting Your Blog 


Website Administrator 

My First Web: 

g Learning about Blogging 


Website Administrator 

My First Webl 

[|D Settings 

g Is Blogging For Everyone? 


Website Administrator 

My First Web| 

£) Soliloquy 





0 Collapse menu 

g Optimizing Your Blog for Search Engines 


Website Administrator 

Uncategorizec 



Long Blog Page! 


WordPress has a neat function, the <!--more--> tag. If you want to shorten the blog post view within the Blog Page, add 
the more tag to all the Posts. 


{g} Dashboard 

All Posts 

Add New 

Categories 

Tags 

G°)j Media 
[g Pages 
£) Comments 
|gj Contact 
§H Appearance 
$ Plugins 
IQ Users 

Ti Tools 

[S|] Settings 
Q Soliloquy 


£ Edit Post 


Post updated. View post 


Tips for Keeping Your Blog Up to Date 


Permalink: http://localhost/?p=33 Change Permalinks View Post 


1 O' 


After the first paragraph, click the "more" button to create the more tag after the paragraph. 


b i link b-quote del ins img ul ol li code | more J lookup dose tags fullscreen 

Keeping a blog up to date is one of the most important aspects of blogging. This is so important because regular blog visitors expect new postings on a regular basis. Not alt visitors expect to 
see a new post as often as once a day but most blog readers expect the content on the blog to be updated on a regular basis. In most cases visitors expect new content on at iVast a weekly basis. 
However, depending on the subject matter the visitors may expect updates on a basis which is either more frequent. Similarly visitors may not be interested in receiving this t\pe of information 
more than a few times a year. Blog owners should be aware of the frequency of which readers expect new posts and should make an effort to oblige the readers ,;ith updates tfns cAten. ! nr} article 
will discuss methods for keeping a blog up to date including scheduling a regular time to post blogs, using publishing tools wisely and hiring guest bloggers when necessar f 


Finding Time to Post Daily 

One way to help to ensure a blog remains up to date is to schedule time to post blogs on a daily basis. This is especially important when blog readers expect new posts on a daily basis or at least 
several times per week. Bloggers who allot a specific block of time each day to researching, writing and publishing blogs are more likely to have a blog which is up to date than bloggers who plan 

on accomplishing tasks when they find time to do so. There may still be days in which the blogger is unable to publish a new post on the blog but these days will be less frequent than if the 

blogger does not have a block of time strictly dedicated to keeping the blog up to date. 

On days in which the blog is unable to devote time to blogging, the blogger may wish to at least publish a short message explaining why it was not possible to post a new blog entry. This will let 
readers know you are aware of their desire to read more information but are simply unable to publish a new blog post. As long as this does not become a regular occurrence, blog visitors are not 
likely to stop viewing a blog simply because the blogger skips a day or two. 

Taking Advantage of Publishing Tools 

Some blog publishing tools enable bloggers to write blog posts ahead of time and specify when each post should be published. This is an excellent feature for bloggers who want to publish new posts 

daily but are unable to dedicate time each day to writing blog posts. This way the blogger can dedicate a block of time each week to write blog posts and have the posts published throughout the 


Word count: 690 


Save Changes! 


Draft saved at 10:24:24 am. Last edited by Website Administrator on January 23. 2013 at 9:37 am 


Do this now for all the posts that you created. Follow the same process as above. Navigate to All Post, select a post to 
edit and insert the more tag after the first paragraph. 
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Viewing the Blog with the more tag added to each Post 


t4C*E flux: 


GDHKT Jfi FTOCkjCT? 



Tips for Keeping Your ffitog Up to Date 


V.— 1 i 1 ~ 
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JI.U n 1? d r UifdiJm a)nirnfuliif>iKid 11+r Lr Lon. JlnJm n)mlb 
mi iua'iin. a, u fern mu km iiMvLlmul lln latelai lln Li-j*; to 


i- idrir ly wulm ma^' 1 Kl bv 1 1 B 
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LMtlHLkmi Mq^r| 


Design Elements of a Blog 
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Maintaining a Successful Blag 

ifapl-r 


Lrdjlii.i.d lAr^n uklKkty uiim*}' :B inu< inn iu ui« iM miak lAf n ill iiinudMtui. 
pragma. lln c.Nd amtini umgiTMiy di'luu-i Fniimdiiihcm mMifaiu lu-Hnnmca 
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Pitd mot ing Your Blog 


dqppity idilsd||W ikdirfluiin uinbt^piibilfci dim 1 a d umr_M ii' u uim 
Kflhrt’-n Un RiMinii un-ual llruf idiiJlilSHBdCLnifaff 1. |udda«lnirml^ JTAyu 

iiurf i|hnpn/il b 1^-JiMi^^BdH li jTr.br Uwb4j; r Hr. a Iman Un iiuu'diilir. Un 

C-a Du 1 1 '■ m i l - IiiIlui wim/li k ihuiBlrNu 


Visitors like seeing Posts structured like this. It's easy to navigate and to find what you are looking for. When you create 
many Posts for the Blog, the page will be extremely long without the more tag. 

If the user clicks on a specific Blog article, the page will redirect to the official page and will be shown in full text 
summary. From this page the visitor can leave a comment as well. 


[Back to Topi 
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Viewing the Website One Last Time before Changing Theme. 

Congratulations , you just designed a website all by yourself. Remember, this is a free tutorial, so not every aspect will be 
covered. However, if you follow the steps set out in this document, you will soon realize that it is not that difficult to do it 
yourself. With Custom Themes, you have a wide range of choices! 

Viewing Website Pages: 



As you can see, changes were made to the overall look. Now, a website can have many pages (some have thousands!) 
and Word Press is very well capable of handling such a task. If necessary, go ahead and add more pages, posts, menus 
and sliders to the website before you proceed. (If you want?) 

View the pages created: 
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Products 

If you know how Co wrte articles and haw to use SEO and smart pages to promote a product then you should find Internet marketing fairly simple. 
If you have not yes been successful, you must be missing something. 

The way to write amdes is to corcfuty consadcr the product you are trying to sell and wrke down as many aspects of * that people would to warn It 
for as you can. Then write an articles on each of these reasons why people should purchase your product. Make die articles simple, explain very 
deary what the product can da and why the reader should buy It. 

Vour tide should be based upon the particular benefit of your article that you are wrelng about, and then you wll be sere that the reader Is focused 
on what you arc offering He or she will not Jiat b a casual reader, but somebody chat has searched (or your topic, and decided to read your article 
based upon the tide. Make sure that you write about the topic of the subject line and you wll ham a good chance that the reader Mil want to read 


Then use your author's resource boa to advertise a page on your webske that can provide further Information on the produce not just your home 
page, but one relevant to the product That might be a review page on the product, a pre-sales page If It Is an affnatc product or your own sales 
page Its your own product Whatever t la It must relate to the product or your visitor will leave immedately: a good prospect lost forever. 

The SEO side of It comes to back up your wrtlng. VBu cannot just rely on article readers to buy your product, but you also need visitors to your site 
from the search engnes. Optimize your website property to persuade the search engines that your website Is good enough to provide a visitor wth 
the information they ware on your subject I am not going to tdl you how to do that here since It wU take too long but my resource boa provides 
further Information. 


One way to use obscure keywords that a few people use now and again Is to use smart pages. Using smart pages, you can use hundreds of differ- 
ent keywords, and even If each only gets used once dally, you wll get hind reds of extra traffic every day. Smart pages work for me and they can 

TO generate them you need to produce a web page for each keyword. Once you have done that, you should write a redirect, so that visitors to the 
smart page do not actuary land on It, but land on another page of your choice that could be a squeeze page or a sales page. That Is up to you. 

By combining article writing, SEO and smart pages, you should be able to drive enough traffic to your webs He to scf any product you wane. 


The above four (4) pictures show the pages and posts created. It's not much, but the structure is intact and more can be 
added. (The Seed is Planted). If you follow the steps as discussed in this document, you will soon recognize and realize 
how easy it is to Design Your Own Website or Blog. 
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WordPress Themes - Personalize Your Website! 

Before changing a Theme , consider that the Custom Theme you want to install may have different settings altogether. 
The principle is still the same, but the structure differs. When creating a new website, choose a theme to use at the start 
of your design and from there you can keep designing until finished. 

(Before changing a theme, make sure to backup all your files within the "www" folder and to have a backup of the 
database files (sql).lfyou have a populated (content) website and then after one year you decide to change the look to 
another theme it's highly possible that problems may arise during transition. Some errors are just too hard to fix and the 
backup can be used to restore the website to a workable state. From there you can choose another theme until you are 
satisfied (Error Free). Backups will be discussed later.) 


By predetermining the look, feel, layout, colors and functions of a WordPress Theme, you will eliminate a lot of 
guesswork and some duplicated design work. 


Note: 


Right Now 

Content 
7 Posts 
7 Pages 
2 Categories 
O Tags 

piemeTwenty Twelve with 6 Widgets 
You are using WordPress 3.5. 


Watch Out! 

With this tutorial you used the default Twenty Twelve Theme throughout the 
lessons. You enabled a few widgets and created a slider or two. 

When changing themes, keep in mind that the slider you created might not 
work with the new Custom Theme installed. The theme may have its own slider 
or its own widgets, specifically designed for the theme. 

Changing themes can also mean that some of the attached pictures will not 
show on the website as the link path has changed, this is true with slides & 
logos. 


Another great feature Custom Themes offer is the customizability of the themes. A lot of effort goes into developing 
these themes by their respected authors, and this only means that the themes are Professional, clean and ready to use. 


Custom Themes also eliminates a lot of design work. When building websites for customers, you are essentially a web 
designer. Using WordPress, I personally believe you are only an assembler! The work is already done by a professional, 
all you need to do is assembling all the pieces to finalise the website. It's as easy as that! 


Once you get familiar with the workings of WordPress and the Database connection, you will start designing quicker and 
more efficient. Everyone can design a website. 
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Quick Overview of WordPress Free Themes 

After all said and done, WordPress is Wonderful. 

Please check out some free Themes at the link below. Just click on Install Themes and a list will be given. Select the 
"Featured "option. 


Install Themes • My Fm* Website — ... x| Products | My First Website 
f 4 UKalhofl 


Manage Themes Install Themes 

Search [ | Newest I Receriy Updated 


Search for a Theme s«arc* "*'*• Here you can search for themes that are available. For the exercise you will select 'Featured*. 

feature Filter 

RnaamtmeaaaeaonapeaitctMuKs Filters can be used to narrow the search by selecting what you want. 


□ Hat* 


& Plugin. 
«U»rs 
TiTooto 
1? Settings 
O Soliloquy 


□ Finable Header 

□ Translation Ready 


QMue 

□ Tan 

□ two Columns 

□ Flora bte Width 

□ BuddyPress 

□ Front Page Poseng 


□ Custom Backgrowid Custom Colors 

□ Full Width Template 


□ Green 

□ Dart 


□ Orange 
Elugnt 


□ Custom Menu □ Editor Style 

□ RTL Language Support □ Saclty Post 


□ Featured Image Header □ Featured Images 

□ Theme Options □ Threaded Comments 


Go ahead and search for a theme that you like. These themes will not be covered in this tutorial. 
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Custom Themes 

Straight to the point! If you are looking for a professional designed website (that you design) that looks very neat, have 
powerful features and easy to edit, then Themeforest Themes is the place to be. It's a place where web designers 
showcase their designs, and there are many to choose from. 

The support is great from an after sales viewpoint. It's Trusted as well as Safe! With over 2.8 million items within its 
marketplace you can be sure there is something you want. 

It really is a one stop Shop! 

Apart from the themes, the Envato© group knows what to offer, and you will be able to find the following from them: 


Activeden: 

Flash 

Site Templates 
Video Players 
Image Viewers 
Facebook Themes 

Flex 

Unity 3D & More 

Audioiunale: 

Music 

Music Packs 
Sound Effects 
Source Files 
Logos & Idents 

TRAX 

Themeforest: 

WordPress 

Site Templates 
Marketing 

CMS 

eCommerce 

PSD Templates 
Plugins & More 

Videohive: 

After Effects Project Files 
Apple Motion 
Motion Graphics 
Stock Footage 

Cinema 4D Templates & More 

Graphicriver: 

Graphics 

Print Templates 
Web Elements 
Add-ons 
Vectors 
Icons 
Fonts 

Logos & More 
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3dOcean: 


3dOcean: 

3D Models 

Cars 

HDRI Images 
CG Textures 
Materials & Shaders 
Base Meshes 
Scripts & Plugins & More 

Codecanyon: 

PHP Scripts 
WordPress 
Plugins 
JavaScript 

CSS 

Mobile 

HTML5 

Apps 

Skins 

WP Themes & More 

Tutorials: 

Web Development 
eBooks 
Design 

Video 

Business 

Mobile Development & More 

Photodune: 

Animals 

Architecture 

Business 

Food 

Health 

Sports 

People 

Technology & Travel 

Never Miss This: 



Every month Envato gives away something for free on each of its marketplaces! Yes, on all of them 


QARK 

To the left is January 2013 Free Themeforest file. This is so Nice! Though a HTML website, nowhere 
else will you receive something for free with this quality. 

INTERNET MARKETING OUTDOOR MARKETING 

9 r SSSSSSSb? 

nJ V ' M m 

Visit Themeforest to Start Your lournev! 

hi Nr • m ma 

SC 



H9 


1 •; “ O » 


IF YOU ARE READY TO SUCCESS THEN CONTACT US 

Note: Remember, each and every month you will receive a free file, make sure to get them! 
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Choose a Theme of Your Choice and Start Designing (Assemble) 

That brings you to the last part of the design process, how do I install a Word Press theme of my own choice? 

Important Note: As long as you keep to the rules like not selling, distributing or using code or selling code that is used 
within the theme, you can use it as long as you want. You bought it! Now use it! 

For the exercise, a theme will be used that was previously downloaded as a free file. The file will be used for the first 
time. Once installed, default settings will be kept and only the necessary will be assembled for the website to get shape. 

As mentioned earlier, you do not need any technical skills like HTML, PHP or even CSS. You will only need content for 
the website. There's no need to fuzz about what to design or how to design, just pick a theme of your choice and start 
assembling. 

Part 1: Moving the Theme for Installation 

How does the market place work? 

When choosing a new theme from Envato you will go through a process of registering and confirming etc., just like any 
other online marketplace. After payment, you will be able to download the file from within your account. This will not 
be shown here but it's pretty straight forward procedures. 

The file that needs to be downloaded will be a .zip folder. Within that folder, the files should look something like this: 


Name 

A- 

Date modified 

Type Size 

1^1 Documentation 


2012/11/04 09:04 ... 

File folder 

License 


2012/11/04 08:56 ... 

File folder 

novatorix 


2013/01/28 08:44 ... 

File folder 

NovatorixHTML 

Original .zip File! 

2012/11/04 08:56 ... 

File folder 


2012/11/04 08:56 ... 

File folder 

IS f reeth em ef o rest-111717 - n ova to rix-10 ■ 

-in-l-business-portfolio-and-blog 1 

2012/11/05 12:25 ... 

I" ivel 38 883 KB 

§ novatorix 


2012/11/04 09:04 ... 

l J 7 964 KB 

.zip 


November 2012 Free Themeforest File 



Documentation: 
License: 
novatorix: 
Novatorix HTML: 
PSD: 

novatorix.zip: 


The Help files - Most themes are well documented for support. 

Single License file. Please read and be Safe. Keep your side clean and all will be well. 
The extracted WordPress files folder. 

HTML version of the website. 

Photoshop file with a layout of the website. 

WordPress Theme - The Actual Theme that will be used. 


|£ Documentation 
Ji License 
Jl novatorix 
£ NovatorixHTML 


Date modified 
2012/11/04 09:04 ... 
2012/11/04 08:56... 
2013/01/23 08:44... 
2012/11/04 08:56... 


Type 
File folder 
File folder 
File folder 
File folder 



The set of basic files above including 
the License will accompany the .zip file 
that you will download from the 
marketplace. The file will be in .zip 
format. That means it is compressed 
and needs to be uncompressed to view 
the files within. 

Uncompressing the file: 

The original filename is very long and 
will probably give errors when trying to 
extract. If you encounter extraction 
errors, just rename the file to a short 
name. 
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Extracting the .zip that's been renamed: 


Name 


Date modified Type 


Size 


i£i Documentation 
£ License 
novatorix 

Ji NovatorixHTML 

. Pin 

1^3 freethemeforest 
^^pTovator!^ 


Open 

§ Extract files... 


Extract to freethemeforest\ 

TZt 

(Sp Scan 
(jp Shred 

Edit with Notepad++ 

Open with 

Restore previous versions 
Send to 

Cut 

Copy 

Create shortcut 

Delete 

Rename 

Properties 


2012/11/04 09:04... File folder 

2012/11/04 08:56... File folder 

2013/01/23 08:44... File folder 

2012/11/04 08:56... File folder 

2012/11/04 08:56... File folder 

2012/11/05 12:25 ... WinRAR ZIP archive 38 883 KB 

2012/11/04 09:04 ... WinRAR ZIP archive 7 964 KB 

This will create a folder with the name 
freethemeforest. Within this folder all the files 
will be located. 


The file was extracted with WinRAR. Many 
choices are available. 


If you use Windows® default, right-click on the 
file and select Extract All. The default program 
should extract the files for you error free. Select 
a path to extract to though. 


Once extracted locate the Word Press Theme. In this case, it will be the novatorix.zip file: 


Documentation 
Jii License 

NovatorixHTML 


Date modified 

2012 / 11/04 09:04 ... 
2012 / 11/04 08 : 56 ... 
2012 / 11/04 08 : 56 ... 


Type 

File folder 
File folder 
File folder 




All the theme files is located within the novatorix folder. This whole folder must be copied to the themes folder in your 
website directory. 

(Word Press files - C:/wamp/www/wp-content/themes/ 


Htme 

Date modified 

Type 


m 

2012/11/ 04 08:57 



,4 tmeges 

201211 T>4 oe 57 

F4eMder 


tt imoges.rffect i 

201211/04 (857 

Fae foktjr 


languages 


F4efolde> 


M K> 

2012/11-04 Cfl-lf .. 



(is SCrpCl 

2012/11/04 0857 ... 



(Wan 

2012/11/04 06:57 ... 



temp 

2012/11/0408:57 .. 

F4e fpldei 


■ 404 


PF4P Script 


m archive 

2011/11/291136... 

PHP Script 


m comments 

2011/11/291141 .. 

PF*Scnpt 

486 

• footer 

2012/07/04 0L19 ... 

PF* Script 


m function! 

2011/12/290832 _ 

PW Script 

8 KB 

" head* 

2012/07-09 04J1 .. 


ID CB 

m hcmepege 

2011/12/2908:31 .. 


19 KB 
1 KB 

m mdw 

2012-07.-090432 ... 

PHP Sciipt 

23 KB 

* P»9« 

2011/12/29 06:28 . 

PF4P Script 


m portfolio template 

2QU/U/29 1137 ... 

PfT Script 

3KB 

m portfolio tampUtaJ 

201011/18 0208 _ 

PF* Script 


"V mart 

201 0.06,-28 0801 ... 

Caeceding Style 1. 

3K8 

k nmodwl 

2010-06-10 12:18 ... 

PNG image 

si kb 

" search 

20n.il/291200 .. 

PF^ Scnpt 

2 KB 

" sidetrar 

2011-11 .-29 12 00,, 

PF^ Script 

1KB 

m single 

2011/11/29 12 J8.. . 

PF# Script 

3KB 

* style 

2mZll-04C8J9.. 

Cascading Style L 

47 KB 

" template blog 

2011/11/29 1241 ... 


3KB 

m lemplete-cordnct 

2011/11/29 1252 — 



* temple**- p«g»-fv4l-Mtdth 

2011/11/291254... 

PfP Scnpt 

1 KB 

" template-sitemap 


PF^ Scnpt 

2KB 
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Do the following: 

Copy the whole folder with all the contents to: C:/wamp/www/wp-content/themes/ 


H»me Date modified Type Size 


1 Documentation 20L2/U/W M>‘ Fil'foWe 



Organize w Include in library ▼ 
Q Libraries 
0 Documents 
Music 

S Pictures 
H Videos 
4$ Homegroup 
£ BabbaT 

rnmnnter 

[£, Local Disk (C:) ] 

ji Intel 
Ji) PerfLogs 
Ji Program Files 
& Program Files (x86) 

Jt RaidTool 
J4 Temp 


£ apps 
Jt bin 
Ji lang 
Jt logs 

Hi temp websites 
•M tmp 






Date modified Type 

2012/12/1104:20... File folder 

2012/12/11 04:20... File folder 

2009/04/15 07:57... PHP Script 

’Currently Installed 


After Pasting - The theme folder will display here. 


Sort by 
Group by 
Refresh 

Customize this folder... 


l Pa ^l 


Paste shortcut 
Undo Move 


J^lugins 

themesj Paste it Here - themes 

Jj upgrade 
J4 uploads 
wp-includes 
Ji Windows 


Offline Themes go to: 

C :/ wa m p/www/wp-co ntent/themes/ 


Online Themes go to: 
www/wp-content/themes/ 


After pasting the folder it should show up within the themes folder: 

>■ 

Name Date modified Type Size 


novatorix 
twenty el even 
twentytwelve 
™ index 


2013/01/24 03:40 ... File folder 

2012/12/11 04:20 ... File folder 

2012 /12/11 04:20 ... File folder 

2009/04/15 07:57 ... PHP Script 


1 KB 


Go to the back end of the website: Appearance/Themes: 


j My First Website | Just another Word... 


| f ' J Manage Themes < My First Website ... 

^ I dt localhost/wp-admin/themes.php 

Most Visited [..] Getting Started &i Latest Headlines I Of Lorem Ipsum - All the ... 


Manage Themes Install Themes 


Current Theme 

Twenty Twelve 

By the WordPress team Version 1 . 1 

The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a 
front page template with its own widgets, an optional display font, styling for post formats on both index and 
single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and 
background. 

Customize options: Widgets Menus Header Background 



Activate Live Preview Details 


The theme is now ' installed Before activation takes place, it is important to make a complete backup of the website and 
database. If something goes wrong then there is a quick fix. Restore the backup. 


92 | P a g e 


BestWordPressThemes. co.za 













Part 2: Making a Complete Backup before New Theme Activation 

Backups are essential! Do this once in a while, not once in a blue moon. The more frequent the better. Imagine your blog 
gets 100 comments a day; you forget to backup and next week the website crash. All is lost! A full week worth of 
comments just lost. This is just an example, but unfortunately these things do happen. 

What to Backup & Save? 

Two things need to be done for a normal WordPress Site: 


• Copy the folder 'www' with all the contents therein; and 

• Make a backup of the database used for the website. (phpMyAdmin) 

Do the following: 

First, Log Out of WordPress so that no data can be written to the database for now. 



Click on the green "W" in the system tray and select phpMyAdmin: 



When this window opens, select the database you created for this website. (When you have multiple sites and you can't 
remember which database it is, check out the chapter about Databases .) 


File Edit View History Bookmarks lools Help 


[ J My First Website » Log In | f_l My First Website | Just another Word... | ^ localhost / localhost | phpMy 

^ ^ localhost phpmyadmin/ 

\& Most Visited [..] Getting Started |^i Latest Headlines lor Lorem Ipsum - All the ... 

phpMyAdmin 

& * » a « 

1 [51 localhost 

u Databases SQL Status * Users Export ^ Ir 


(Recent tables) ... [▼] 


General Settings 


[ 8943jms8u2309vkjs827uj | 

^ Server connection collation <j$i : utf8_general_ci ▼ 

be stwo rd Dre s st h e m e 

Click on the database. 

□ boomlusernsa 

□ information_schema 
(j) jacstore 

Q Iuv2stitch 

□ mysql 

Ij) performance_schema 
(j) test 

(j) treelucernsa 


Appearance Settings 

£ Language @ : English ^ 

^ Theme: pmahomme |V| 

• Font size: 82% Q 

More settings 

Select the database you created for this website! 
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Select the correct database from the left, click on it and the following window will open: 


L J My First Website > Log In 


| : j My First Website | Just another Word... J ^ localhost / localhost / 8943jms8u2309... > 


$ l ocalhost phptnyadmin/index.php?db=8943jms8u2309vkjs827uj&token=074712bfld419936436ae6f728aa2b6c*PMAURL:db=8943jms8u2309vkjs827ujatserver=l&target=db_structure.php&token=074712bfld419936436ae6f7. 

fill Most Visited [_] Getting Started |3gi Latest Headlines 111? Lorem Ipsum - All the ... 

phpMyAdmin 

& >4 ® 0 « 


I [33 localhost » | 

i 8943jms8u2309vkjs827uj 









M Structure 

O SQL 

-4 Search 

Li Query 

ti^i Export 

e-i Import 

JP Operations 

■ :j Privileges 

^ Routines 

® Events 

3g> Triggers 


(Recent tables) ... 


[~8943jms8u2309vkjs827uj[^| 

5 wp_commentmeta 
5 ] wp_comments 
5] wpjinks 
I HU wp_options 
lD wp_postmeta 
n 5 ] wp_posts 
151 wpterms 
5] wp_term_relationships 
5] wp_term_taxonomy 
5] wp_usermeta 
wp_users 


Create table 



wpcommentmeta 

15) Browse Structure 

Search 

>■ Insert ^ Empty ^ Drop 

0 

InnoDB 

utf8_general_ci 

48 KiB 


□ 

wpcomments 

5 Browse y Structure 

$ Search 

>c Insert ijj^i Empty ^ Drop 

1 

InnoDB 

utf8_general_ci 

80 KiB 

- 

□ 

wpjinks 

5 Browse y Structure 

^ Search 

>■ Insert ^ Empty ^ Drop 

0 

InnoDB 

utf8_general_ci 

32 KiB 

- 

□ 

wpoptions 

5 Browse y Structure 

$ Search 

>c Insert ^ Empty ^ Drop 

287 

InnoDB 

utf8_general_ci 

2 MiB 

- 

□ 

wppostmeta 

5 Browse y Structure 

Jt Search 

>■ Insert ^ Empty ^ Drop 

171 

InnoDB 

utf8_general_ci 

96 KiB 

- 

□ 

wpposts 

5 Browse y Structure 

$ Search 

>c Insert @ Empty ^ Drop 

129 

InnoDB 

utf8_general_ci 

416 KiB 

- 

□ 

wp terms 

5 Browse y Structure 

-t Search 

>■ Insert @ Empty ^ Drop 

S 

InnoDB 

utf8_general_ci 

48 KiB 

- 

□ 

wp term relationships 51 Browse y; Structure 

$ Search 

>c Insert ijj^i Empty ^ Drop 

17 

InnoDB 

utf8_general_ci 

32 KiB 

- 

□ 

wp term taxonomy 

5 Browse y Structure 

Search 

>s Insert ^ Empty ^ Drop 

S 

InnoDB 

utf8_general_ci 

48 KiB 

- 

□ 

wpusermeta 

5 Browse y Structure 

$ Search 

>c Insert ijj^i Empty ^ Drop 

26 

InnoDB 

utf8_general_ci 

48 KiB 

- 

□ 

wpusers 

5 Browse y Structure 

Search 

>b Insert ^1 Empty ^ Drop 

1 

InnoDB 

utf8_general_ci 

48 KiB 

- 


11 tables 

Sum 



642 

InnoDB 

latinlswedishci 

2.9 MiB 

OB 


Check All / Uncheck All 


With selected: 


SI 


(§) Print view Data Dictionary 


Create table 


Database Files! 


* 


Number of columns: 


□ 


Select all the files within the database. These files need to be saved! Select Check All at the bottom and Click on Export. 


My First Website > Log In 


I 5 My First Website | Just another Word... j localhost / localhost / 8943jms8u2309... x | + 


, ^ ® localhost^phpmyadmin/index.php?db=8943jms8u2309vkjs827uj&token=074712bfld419936436ae6f728aa2b6c#PMAURLdb=8943jms8u2309vkjs827uj&server=18ttarget=db_structure.php&token=074712bfld419936436ae6f7 

|P(i Most Visited [.J Getting Started Latest Headlines ItJf Lorem Ipsum - All the ... 

yt Structure SQL 


phpMyAdmin 

Gt ® B ^ 


(Recent tables) .. 


□ 


8943jms8u2309vkjs827uj 0| 

5j wp_commentmeta 
5] wp_comments 
51 wpjinks 
g) wp_options 
lJ wp_postmeta 
51 wp_posts 
5) wpjerms 
□ wpJerm_relationships 
wpjermjaxonomy 
5 ] wp_usermeta 
wp_users 

^ Create table 


dJ3 localhost » 0 8943jms8u2309vkjs827uj 


Search 


Query 


^ Import Operations |=J Privileges Routines ® Events Triggers 



Table * 

Action 


Rows 


Type 

Collation 

Size 

Overhead 

z 

wpcommentmeta 

51 Browse y Structure 

^ Search 

j*a Insert ijjgji Empty ^ Drop 

0 

InnoDB 

utf8_general_ci 

48 

KiB 

- 


wpcomments 

5 Browse y_ Structure 

$ Search 

>b Insert ijjjjjji Empty ^ Drop 

1 

InnoDB 

utf8_general_ci 

80 

KiB 

- 


wpjinks 

5 Browse y_ Structure 

^ Search 

>b Insert ijjgfi Empty ^ Drop 

0 

InnoDB 

utf8_general_ci 

32 

KiB 



wpoptions 

5 Browse y Structure 

$ Search 

>b Insert ijjjji Empty ^ Drop 

287 

InnoDB 

utf8_general_ci 

2 

MiB 

- 


wppostmeta 

5 Browse y Structure 

t Search 

>b Insert @ Empty Drop 

171 

InnoDB 

utf8_general_ci 

96 

KiB 

- 


wpposts 

5 Browse y Structure 

$ Search 

Insert ^ Empty ^ Drop 

129 

InnoDB 

utf8_general_ci 

416 

KiB 

- 


wp terms 

5 Browse y Structure 

$ Search 

5-b Insert Empty ^ Drop 

S 

InnoDB 

utf8_general_ci 

48 

KiB 

HB 


wp term relationships 

5 Browse y Structure 

$ Search 

>b Insert ijjjjjji Empty ^ Drop 

17 

InnoDB 

utf8_general_ci 

32 

KiB 

- 


wp term taxonomy 

5 Browse y Structure 

$ Search 

>b Insert ijj^l Empty ^ Drop 

S 

InnoDB 

utf8_general_ci 

48 

KiB 



wpusermeta 

5 Browse y Structure 

$ Search 

>c Insert ^1 Empty ^ Drop 

26 

InnoDB 

utf8_general_ci 

48 

KiB 

- 

0 

wpusers 

5 Browse y Structure 

% Search 

>b Insert Empty ^ Drop 

1 

InnoDB 

utf8_general_ci 

48 

KiB 

^B 


11 tables 

Sum 



642 

InnoDB 

latinlswedishci 

2.9 

MiB 

0 B 


I Check All I Uncheck All 


With selected: 


B 


Print view ^ Data Dictionary 




^1] Create table 


Select all files and select Export! 


Name: 


Number of columns 


= □ 
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The Check All will ensure all files are selected. After export was clicked, a window will open with the Export Method. 
Select Custom. Two changes need to be made: 

Give the database a name (save name); and 

Add drop table... option need to be selected. 


u My First Website > Log In | LJ My First Website | Just another Word... |^J,localhost/localhost/8943jms8u2309... x | + 


^ localhost'phpmyadmin/index.php?db=8943jms8u2309vkjs827uj&token=074712bfld419936436ae6f728aa2b6c#PMAURL:db=8943jms8u2309vkjs827ujfiiserver=l&target=db_export.php&token=074712bfld419936436ae6f728a£ 

|p|i Most Visited [_] Getting Started |^i Latest Headlines for Lorem Ipsum - All the ... 

phpMyAdmin 

& l* # © ^ 

1 I^)localhost» 

G 8943jms8u2309vkjs827uj 

Structure 

Q SQL \ Search (j| Query ^ Export ^ Import Jr* Operations 0 Privileges <§§ Routines ® Events 24 Triggers 

Exporting tables from "8943jms8u2309vkjs827uj" database 

Export Method: 

(Recent tables) ... [▼] 

8943jms8u2309vkjs827uj [▼] 

(Fj wp_commentmeta 
l] wp_comments 
||] wpjinks 
[F] wp_options 
wp_postmeta 
H wp_posts 
J wp_terms 
dJ wp_term_relationships 
[2 wp_term_taxonomy 
lJ wp_usermeta 
(W) wp_users 

® Quick - disDlav onlv the minimal ODtions 

^ Select Custom! 

Format: 


SQL 0 



Go 

Click Go 



_j) Create table 



Select Go. In the following window you will have to give the file a name and you must select 'Add Drop Table...". 



Select Custom Settings 
Give Database a Name 

Select - Add Drop Table/View/Procedure/Function. 
Select Go to Save & Download 


Note: 

Save: a Window should pop-up automatically after pressing Go. Save the 
file to your computer. (The folder you created earlier). 


Opening myfirstwebsite.sql 
You have chosen to open: 


myfirstwebsite.sql 

which is a: sql File 
from: http://localhost 

What should Firefox do with this file? 


Open with [ Browse... J 

O Do this automatically for files like this from now on. 



Local Disk (C:) ► wamp ► temp websites ► myfirstwebsite.co.za 


D 


0 


ry ▼ Share with ▼ New folder 

Save to folder you created. 



* Name 

Ji images 

Jt WWW 

§ freethemef orest 

l j mydomainname.co.za details 

( myfirstwebsite.sql j 


Database is saved! 
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Next , you need to save all the files within the "www" to a .zip file. 

Do the following: Go to C:/wamp/www/ 

Click on the www on the left. This will display all the files and folders within the 'www' folder. Click on Edit/Select All 
(Ctrl+A). This will select all the files. 


>| , ► Computer ► Local Disk (C:) ► wamp l 


Undo Delete 

Ctrl+Z 

Redo 

Ctrl+Y 

Cut 

Ctrl+X 

Copy 

Ctrl+C 

Paste 

Ctrl+V 

Paste shortcut 


1 Sele: 

Ctrl+A 

Invert Selection 


Select All Files (www) 


sk (C:)~| 


> ^ Intel 

J4 PerfLogs 

> kl Program Files 

> Program Files (x86) 
S RaidTool 

[> Ji Temp 
t> k Users 


> Jn apps 

> Ju bin 
t> S lang 

S logs 
scripts 

> S temp websites 
Jt tmp 

> S tools 

I ' WWW I click Here 

> wp-admin 

> wp-content 

> k wp-indudes 
> Jt Windows 


* 

Name 

Date modified 

Type 

Size 


Jt wp-admin 

2012/12/11 04:20 ... 

File folder 



k wp-content 

2013/01/24 02:37 ... 

File folder 



S wp-indudes 

2012/12/11 04:20 ... 

File folder 



■S index 

2012/01/08 05:01... 

PHP Script 

1KB 


license 

2012/05/06 07:28 ... 

Text Document 

20 KB 


Q readme 

2012/11/30 12:57 ... 

Firefox HTML Doc... 

9 KB 


^ wp-activate 

2012/11/17 03:11 ... 

PHP Script 

5 KB 


Ty wp-blog-header 

2012/01/08 05:01 ... 

PHP Script 

1KB 


wp-comments-post 

2012/04/10 05:21 ... 

PHP Script 

4 KB 


^ wp-config 

2013/01/0711:03... 

PHP Script 

4 KB 


^ wp-cron 

2012/09/23 04:57 ... 

PHP Script 

3 KB 


Ty wp-links-opml 

2010/10/23 12:17 ... 

PHP Script 

2 KB 


^ wp-load 

2012/10/26 07:40... 

PHP Script 

3 KB 


wp-login 

2012/11/30 01:41 ... 

PHP Script 

29 KB 


Ty wp-mail 

2012/09/25 05:26 ... 

PHP Script 

8 KB 


wp-settings 

2012/11/22 09:52... 

PHP Script 

10 KB 


Ty wp-signup 

2012/09/11 12:27 ... 

PHP Script 

18 KB 


wp-trackback 

2012/01/08 05:01 ... 

PHP Script 

4 KB 

= 

xmlrpc 

2012/09/11 08:11 ... 

PHP Script 

3 KB 


With all files selected, right click on a highlighted area and select - Send to/Compressed (zipped) folder. This will ensure 
that all the files & folders will be compressed to a .zip file. 



it wp-admin 


2012/12/1104:20... File folder 

k wp-content 


2013/01/24 02:37... File folder 

k wp-indudes 


2012/12/1104:20... File folder 

index 


2012/01/08 05:01 ... PHP Script 

license 


2012/05/06 07:28 ... Text Document 

1 readme 


2012/11/3012:57... Firefox HTML Doc... 

% wp-activate 


2012/11/17 03:11 ... PHP Script 

h wp-biog-header Select all files within 'www' 

2012/01/08 05:01 ... PHP Script 

wp-comments-post 


2012/04/10 05:21 ... PHP Script 

^ wp-config 


2013/01/07 11:03 ... PHP Script 

TL wp-cron 


2012/09/23 04:57... PHP Script 

|T>. wp-links-opml 


2010A0/23 12:17 ... PHP Script 



2012/10/26 07:40 ... PHP Script 

^ wp-login 


2012/11/30 01:41 ... PHP Script 

wp-mail 


2012/09/25 05:26... PHP Script 

T wp-settings m 6 ni cncK on nignugmea area ana seieci. 

2012/11/22 09:52 ... PHP Script 

- W p. 5 ignup Send to/Compressed (zipped) folder. 

2012/09/11 12:27 ... PHP Script 

T>_ wp-trackback 


2012/01/08 05:01 ... PHP Script 

xmlrpc 

7-Zip ► 

2012/09/11 08:11 ... PHP Script 




(fp Scan 



(|p Shred 



|5? Edit with Notepad++ 



§ Add to archive... 



Add to "www.rar" 

.zip 


§ Compress and email... 



§ Compress to "www.rar" and email 



>| 

j! Compressed (zipped) folder J 



Cut 

K Desktop (create shortcut) 



Copy 

|~*| Documents 




jjjg Fax recipient 



Create shortcut 

_ J Mail recipient 



Delete 




Rename 



Properties 



When prompted, give the zipped file a name. Cut the file, and then paste it to the folder you created for safekeeping. 


A 

Name 

Date modified 

Type 

Size 

images 

2013/01/24 05:26 PM 

File folder 


, WWW 

2013/01/21 12:36 PM 

File folder 


■ freethemef orest 

2012/11/05 12:25 PM 

Compressed (zipp... 

38 883 KB 

mvclomainname. co.za details 

2013/01/23 08:38 PM 

Text Document 


I myfirstwebsite.sql 

2013/01/24 05:37 PM 

SQL File 

T 1219 KB 

L v myfirstwebsite J 

2013/01/24 06:34 PM 

Compressed (zipp... 


Now you have a complete backup of the website. You can move it to another 

computer or online. 
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Part 3: Backups Made! Time to Activate New Theme 

You are Happy! A Complete backup has been made of the website and the database. This means the website is in full 
working order. You will be able to move it anywhere and it will still display and work the same. 

Do the following: Go to Appearance/Themes. 

Activate the New Theme. This will make the name the current theme. The layout & colors will changes once activated. 


(J} Dashboard 
Posts 
G°J) Media 
[£] Pages 
($) Comments 
g Contact 


[Themes 

Menus 

Header 

Background 

Editor 

$ Plugins 
^ Users 

T! Tools 

[Sf] Settings 
O Soliloquy 


Manage Themes Install Themes 

Activate the New Theme 


New theme activated. Visit site 



Available Themes 


Current Theme 

Twenty Twelve 

By the WordPress team Version 1.1 

The 2012 theme for WordPress is a fully responsive theme that looks great on any device 
front page template with its own widgets, an optional display font, styling for post formats 
single views, and an optional no-sidebar page template. Make it yours with a custom mer 
background. 

Customize options Widgets Menus Header Background 



Click Activate! [ Activate J Live Preview Details 


Activate Live Preview Details 


View the Website: 


HOME BLOG CONTACT US PRODUCTS 

NOVATORIX 


Designing Your Own Website 


The homepage (the front page of your website) is where you and your company get to make a first 
impression and we all know what they say about first impressions... It's the first place new visitors 
come and where old visitors come back. You must cater to both types of customers. There are a few 
things that are essential to your homepage and each is explained below. 


Navigation 

Navigation is the most important part of your homepage. It doesn't matter what else is on your site, if 
the visitors can't get there. On your homepage your visitors need to be able to reach every part of your 
website. Your links on your navigation bars should be the same on every page. Your visitor will then 
know how to get back to whatever page really interested him. When users cannot find what they want 
they simple look at another site. This is a fact. Your links on the navigation bars should also be simple 
(one or two words) but descriptive. 


Categories 

• My First Website 

• Uncategorized 


Branding 

Branding is another essential element for you homepage. I am sure that your small business has a logo 
and it's pasted on everything you can find, to promote your business. Well, it should be posted in a 
predominant place on your website too. We all know that branding is words or a mark of a company 
(such as a logo) that shows the consumer the identity of the producer of the product/service. Showing 
your logo on your homepage reminds users exactly where they are. 


Content 

Last but not least is content. Content is also very important. You must remember to write your content 
like you are speaking to your visitor as it creates a better connection between your website and the 
visitor. Your homepage content must be fresh and interesting to make them want to read more of your 
site. You might create links to the inside of your site in the text. Also, you will want to include in 
layman's terms exactly what you or your company does. You would be amazed how many websites 
you have to search to find out what their purpose is. 

These things should get you started on building your homepage. There is one rule that I have learned. It 
is the KISS rule (Keep it Simple Student). Your homepage does not need to be flashy with all types of 
images, and flash design, or blinking. Most people like sites when they are simple and easy to 
understand. You must remember who your audience is. Therefore you need to speak in their language. 
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Part 4: Making Necessary Changes after Activation of New Theme 

It already looks very nice! Now, as a result of choosing a new theme, certain settings need to be changed otherwise some 
elements may not display properly. 

Important: Check & Change these settings whenever you change a theme: 


• Menu 

• Change the Page Templates 

Menu: Go to Appearance/Menu. Select the Header Menu to display within the header & Save Changes. 


{£} Dashboard 
Posts 
& Slider 

[£D Pages 
@ Comments 
(D Contact 


■ Themes 

$ Plugins 
Users 

Ti Tools 

[Ifl Settings 
(~> Soliloquy 
® Novatorix 


|snl Menus 


Theme Locations 

- 

Your theme supports 1 menu 

i. Select which 

menu you would like to use. 


- 


Main Menu 

HD 






Custom links 
URL http:// 

Label Menu Item 


Most Recent View All Search 
O Terms & Conditions 


Custom Menu 

Menu Name Main Menu 
Delete Menu 




□ Automatically add n< 

Page ▼ 

Page » 

Page » 

Page ▼ 


Choose the Menu for the Header 


Start by going to the Home Page first. All page templates need to be changed as a result of activating a new theme. Not 
doing so will result in layout issues or errors. 


From All Pages/Select the Home Page and select Edit Page: 


£d<t Pj9« « My first Wetatfc — Word- * My First Wcbstc 
^ r$ tocdhost n chr post^&action-edrt 

£> Most G*t*9 $Urt«d * l*«t U torem Ipsunt - Ail »*• 


■ [gjfr -lang: 


SA and iVortd Nevrt. Sport* _ 1 + 


£ Edit Page *«N f 


Designing Your Own Website 

Pormaimfe: http fflocaihosV vWwPag# 

1 Add Media O Ada SMw 


This is the Home Page 
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Edit the Blog Page Template as well and Save Changes! 


Edit Page < My PWa WtfasHc — Word.- MyRmWtbtiU [ N**T*B B e »« ld 

4- Eoc*»y>« 

A Most Vis4«d Q Getting Suited A Latest He*dknes (it Lwem Ipsuro - All the ... 



fa Contact 
£ Appearance 
& Plugins 


| jg] Bmfang SA »nd Wortd Ntwj. Sports. .. | + | ^ m „ 

C H-Gooy.r P * * • | 



V«*4ly PuBhc Li! 

3J PiMMd on Jan «, KMJ « 14:12 i ;t 



Page Attributes 



Viewing the Blog Page: 



Maintaining a Successful Blog 


Promoting Your Blog 


Leaning about Blogging 



Homepage Top widget 


T7WI Is Homepage 'C 


Recent Posts 



Homepage Bottom Widget 
Right Sidebar 

Homepage column 1 

TWs Is !fe l^ynepege coumrt 1 . 

Homepage column 2 
Homepage column 3 
Homepage slogan 
Footer column 1 
Footer column 2 
Footer column 3 
Footer column 4 
Header Search Form 
Post Anthor Info 
Post Column 1 ( middle) 
Post Column 2(middle) 
Contact Form 
Contact Sidebar 


In order for the Blog to work, changes were made to 
the following: 

Featured image added to each post. Slider added to 
Home Page: 



Design Your Own Website! 



Notice the Footer Widgets. Custom Themes have 
widgets for all over the place, for instance, this particular theme has a lot of widget positions to choose from. 


Note: 

This theme (and many other) has a built in contact form. Contact form 7 was de-activated and deleted from the Plugins 
Menu. Take note that the form can still be used however. 

For now all changes are made. If you would like to buy this theme kindly visit the authors post on T hemeforest . 
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Viewing final Changes to Website before Uploading 

Many more settings can be changed but for now the website is finished. Congratulations. All that need to be done now is 
backing up the files and uploading them to a webhost, including the database. 



The Website came out pretty neat! 



Remember, there are many Custom Themes to choose from: 

Blog/Magazine / Creative / Corporate / Retail I Technology / Non-profit / Entertainment / Mobile / eCommerce and 
many more... 
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Choosing a Web Host for Your Website 

The website is finished and you want to upload it to a webhost. With many to choose from, please consider that for the 
lesson only a webhost with cPanel will be used. It's easy to work with and gives you a lot of direct control! Just like 
working with files and folders, cPanel can be used the same way. cPanel is recommended though! You can read more 
about cPanel by going to the cPanel Website . 

The Hosting Plan 

In order for WordPress to work, you will need: 

• Disk Space on the web (internet webhost) 

• Sql database 

A lot of internet companies are choosing cPanel these days. Here's a very popular webhost that will suit all your needs. If 
you are not happy with them, you may choose any host of your choice; just remember that you will need a .sql database 
function for WordPress. 

(Do you like saving money, buy webhosting for a full year (12months). Webhost providers have many great deals when 
choosing annually and not monthly.) 

Click on the picture below to decide if you want to sign-up with Dream Host. 


Dream Host gives you: 

• Unlimited Disk Space 

• Unlimited Bandwidth 

• cPanel 

• Database 

• 24/7 Support 

• Plus Much More... 



When you create an account, you must complete two tasks in order for a website to have a home on the internet. 

i. You must register a domain name. This is the website address : www.yourdomain.co.za 

ii. You must obtain webhosting (disk space) for the website files to be hosted. 

Registering a Domain Name: 

The domain name is the name of the website. Choose carefully and try to keep with what your website is about. Try 
choosing a domain name that reflects the keywords you will use within you site etc. 

A domain name comes in a variety of choices, and the price differs as well: Make sure before you sign-up that you are 
happy with the extension of the domain name. Here's a list of a few domain extensions you can choose: 

Domain Name Extensions (samples): 


.co.za 

.com 

.net 

•org 

.info 

.co.uk 

.eu 

.biz 

.us 

.name 

.tv 

.mobi 

.fm 

.me 

•org.za 

.za.com 

.CO 

.co.nz 

.XXX 

.org.uk 
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If you have future endeavours of designing a site (not hosting now), you may want to obtain a domain name before 
that. The reason for this is the internet is growing at a rapid pace. The name can be taken by someone else (which 
happens a lot) and then you will have to sacrifice or improvise. You do not need hosting if you only want to buy a 
domain name. When you choose this option, ask your webhost administrator to 'Park the Domain' until you are ready to 
use it. 

Signing Up for Web Hosting: 

Web hosting companies can be easy to work with, or they can be a nightmare. Use tried and trusted hosting, like 
DreamHost . Some hosting resellers will offer a downgraded package for almost the same price as normal hosting, plus 
you don't get any extras when choosing these packages. All extras are available at extra cost. 

Reseller hosting is when you 'hire' for instance 10GB of disk space on a Webserver, then reselling it. This is however a good income if 
used properly and with some initiative (assembling websites for a living), but some resellers charge simply too much! The downside 
with these packages is you may not receive a database to use, and the database will be added for you if you pay extra. This is a 
waste of money honestly. Emails are limited etc. 

Choose normal hosting with an annual price, this way you will save money and you will be assured for the next 12 months you need 
to pay "Zero" to anyone. It's not even that expensive anymore, and with the help of this document you already saved money by not 
paying for design costs, You Can Do it Yourself! 

The process: 

• Sign up with a host of your choice or use DreamHost 

• Register a domain name 

• Select the webhosting package that suits your needs. Minimal packages will do, look for 
database function. 

• Pay for an annual sign up and your set! 

When the transaction is completed, you will receive documentation from the webhost that includes: 

• Hosting account details 

• Server information 

• Email Information 

• cPanel Log-In information 

• FTP information etc. 

Some hosting companies may send you different information, but it should be in line with the above. Keep this 
information (probably emails) safe and secure, only for use by authorised persons. 

When you have the following, you can proceed to upload the website to the host: 

• Domain Name; and 

• Web Hosting with cPanel. 

If any of the information is unclear to you at this point, kindly contact your new webhost for support. These people work 
hard in gaining customer satisfaction, so you will be in good hands. 

Note: 

The new website will take some time to propagate. It's normally between 24-48 hours. This need to be done to check if 
there are any contradicting info, like someone else that has already obtain the domain name you want to use etc. So if 
you don't see the website immediately after signing up, please note that this is normal! However, you will be able to 
access the cPanel of the website on a temporary server until the process is finalised. IMHO, wait until all is good and then 
proceed uploading your files. 
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cPanel - Overlook 

cPanel is really easy to work with. If you are familiar with Windows Explorer you will not be intimidated by the look and 
workings of cPanel. It's about Files & Folders , Editing & Deleting, Copying & Pasting. 

To continue, the assumption will be made that you have already signed-up for a hosting account that uses cPanel. 

How to Enter cPanel: 

Methods that should work: 
www.domainname.co.za/cpanel 
www.domainname.co.za :2082 

Both of these should work. For the rest of the tutorial, you will be using :2082 at the end of the URL. 

This is the port used to access the cPanel. Now you can see how important it is to keep information about the website 
safe and secure. 


For the tutorial, the website that will be uploaded is the one that you worked on this far, the domain name that will be 
used for the exercise is (in order to access cPanel): 

www.bestwordpressthemes.co.za:/2082 


Navigating to :2082 

When directing to the cPanel, the following window will appear (may look different - depends on host or version): 
Fill in the username and the password that you received from the host. 


@ Most Visited [..] Gettii |ji Latest Headlines lo> Lorem Ipsum - All the ... 



note :2082 at the end of the domain name. 


File Edit View History Bookmdrks Tools 






; P osts < My Fi rst Website — Word P ress 

My First Website 

| | cP cPanel Login 

*|J_ 




You should have received this information 
from the webhost when you signed-up. 


cPanel 






JU Username 



Password 



1 Password ountpassword. 





Log in after entering 
information. 


English Deutsch espariol espariol de Esparia frangais Nederlands 


<P 

Copyright g 2012 cPanel, Inc. 


(Note: 

If you feel that the password is not secure enough, don't stress, this can be changed. Either way, it is recommended that 
you change passwords once in a while...) 
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The following window will open once you log in to cPanel ; 



Do you need help? 


Notices 

Find 


o & k e a w * 


Change Shortcuts 


Frequently Accessed Areas 

File Manager 


I d tv 

Welcome New User 


Do you need help getting started? 


© 


Get Started Now No, I'm fine. Thanks! 


You can view our video tutorials to help you setup your cPanel. 

Hi] Don't show this again 

Yes or no, you decide... 

ss* **3- r£ £ — *£ >• 


a? 

l es ponders Address 

ia n 


Select an option and continue. 


Complete view of cPanel: 



Notices 

Find 

Find functions quickly by typing hors. 


Frequently Accessed Areas 

File Manager 



Preferences 


© 

Getting 

Started 

Wizard 

SB 

JL 

e 

Contact 

Info 

Style 

'A? 

Change 

Language 

♦ 




Hail 



a 

js£j 

M. 

Isp 

BoxTrapper 

A SP ‘ m - 

Forwarders 

IT 

Default 

JD 




£ 

IT 

% 

Mailmg 

Level 

Filtering 


Addresses/ 

Authentication 

M 







*PP* 

Wizard 










Files 



A 



f ' 

0 

4- 


♦ 

Backups 

Wizard 


File 

SP»r« 


Accounts 

$ 

Session 

Control 










Logs 



A 

& 

M, 

z> 

la 

la 


A 

Analog 


u 




Logs 



Programs 


Usage 







Security 



A 

jT 

IS 

IP Deny 
Manager 

& 

SSL/TLS 

Manager 

Iff 

SSH/ Shell 
Access 

4 

MotUnk 

Protection 

Laech 

* 

GnuPG 

keys 







A 

a* 

’ § 

• 


* 

A 



Domains 

Domains 


D«S Zone 

ONS Zona 





Databases 



A 

^MySQL® 

MySQL* 

phpMyAdmir 


Fan— 

PostgreSQL PostgreSQL phpPgAdmin 


k Wtawd 




Wizard 




Software/Services 


A 


1 

f 

fa 


m 

a 


Center 

Software 

Modules 

SEE 

Configuratio 


* 

J5L 

soft 

Softaculous 








Advanced 



A 


% 



JL 

Ji 

H 

Handlers 

Manager 

Manager 

pages 

Cron jobs 


Extension, 

• 


i 





Hs 

Scanner 








Softaculous Apps Installer 


A 


® » K (v) «J ■ |$j tf < 

WordPress Joomla Joomla OpenCart PrestaShop phpBB Drupal SMF Myl 
1.3 



home ■ Trademarks ■ help • Documentation ■ Contact ■ Logout 


To the left is the interface of the cPanel. For this tutorial you will 
only work with the highlighted areas: 

• File Manager 

• MySQL Database Wizard & phpMyAdmin 

Email Account 

Create an email account to use with this website. 

File Manager 

Upload all the files here through the file manager 

MySQL Database Wizard & phpMyAdmin 

Create & Edit database user and password for the website 
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Below is a complete picture view of the cPanel Interface. Once you get familiar with the workings , you will gradually find 
new things and elements to add to the website. However, the highlighted items above are the only ones you will cover 
for this tutorial. 


D * 

HELP LDGE4JI 





Find 

Find functions quickly by typing here. 


File Manager 

Stdt* 

Uki Dofr^r. bestword[»p«stf*e 

Ho™ Dnctory f h a ™/ h 2 m 2 wimj L 

LlEL k>1 PHfA A L. ISO. 177 jiXJiS 

0 i 100 V, 


o m 


ft 

*# 


a; 


thing 

Sftortwj 

iVimrd 


CPU usage 
Cv: liryt 


Emal AsMufCi 


FTP AsMuPja 


0-7% i IflO&M* 
a i sac 
a/ 2 
o/s 
t/% 
a / o 


Qfi 

I 


Hi 


M 

Apps 

Wizard 


0 

MVebmail 

4 

jMxciunt 

Lave I 
Filtarifl0 


ScxTr^pper S 
*55 

6A 


S 


o 

V'-' 

Forwarders DeFflylt 

P-eaponders Address 


I 


Email import Email MK Entry 
Tri:* AddraEEO*/ A ulhanti cation 
Forwarders. 


Personal Info 


AH Mail Settings 


-Ulfii- 


Backups 


FTP 

Sunn 

L !D r a . r c- 1 




Disk 

Manager Flic- Snore 

Manager LEsage 


-LLlLi— 


Ualiig lbls 
« K*. C4 l#Jhmj 

LJyiri. QiUtuui Cl 


0 f 1 

■I / 4 


PmLjraSCS. 




© 


ChOCit 

Log 

Programs 


*» j* j a 

l^ggnhglit 

Hi 


Q ME 

“*** L>sl ^ C Mft 

Sfw-M 

fitlluvreb Silver 
SfriM lii-* daa-dfllu ■ 


n 

AkWnOrd 
Prf.ntl 
□ inKborin. 


St .f 


Cr'J'ft Vifion 

11.34.1 (build 7) 

THem* 

X3 

Vft^gn 


PU P v«=n 

S.J.lS 

n b srj_ V ITK4) 

:3.3,2B-dl 

Ardwsshffl 

xe&_G4 

L>-#rj In-j iyvl«rr, 

b.u« 

ShMri F 

dl.as.113.191 

Parti loserdmal 

/usr/sblnVscndmall 

Prti bPirt 

/us^tin/paiH 

FkI r«ui 

S.iQ.i 

KhtmI h«!Sky 

2.6,32-379.1.1 .hel.. 

rFv*) Pro 

1.0 (RCi) 

S*r™^Sljlu» 

disk ^ vi*w 


Jk * 


Pnrkn-d ft-dir-rtn f. inplt 
Dcm»l™ Ok® Jon* ON® ?on* 

fditE* 1 Sd'tEH- 


Mud*** 


MyBlJLS M/SQMS 
Databases Database 
Wizard 


<5fr™v. 


— rJLQFjii jjT.sa.5 — 

fSL^ 


* ;«n 

Hvso.' 

plrpMyAdmin R*mota Postgre-sqL PostgraSQL pfipP B ^dmin 
My«3t Databases DatabaE* 

Wizard 




J a 

CloudFlanc OO] 

Center 


h:vfiit-»ai. ildafialvot Phis 


a 


soft 

EoftBculourE 




w 

Index 

Manager 


Submit a 
Support 
Requeat 


iy 


s “'‘‘" , "‘ >ll ^ 1 ,|,° 


9» si & ® aj &i « a 

W c® - d F"o s 5 Joomla Jn-anda CpenC-art PtwtaShop phpBB Drupa! SMF My? 


i & & & If 

Immgm Wiki* SODil Ad 

Qallvrin. Networking Ma nsficnr cot 


A H r 


Nome " I radenarks ■ Help * Dc*-jn-entatibn * Cunt act * Lptolt. 


"N 


Direct website f[le access! 

"www" 




Saved & Logged Information 


https:// security 


Create extra "websites" 

or redirect to other site 


SQL Databases! 


Server Software... 


Advanced Settings^. 


Install these from here... 


[Back to Topi 
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Going "Live Online” 

Almost done! You've designed a website with WordPress, chose a theme and obtained a domain name and webhosting. 
All that needs to be done is to upload the offline website to the online server. 

Changes that will occur: 


• Backup the files into a .zip {older (www folder contents} 

• Backup the database jsgi} 

• Upload the www folder contents and extract online 

• Edit wp-config.php within file manager to point website to Database 

• Create a database with MySQL Database Wizgrd_ & Update wp-config.php 

• /mporf sgved_ database (sgyed_ .sali with phpMyAdrnin 

• Edit wp-options file within phpMyAdniin / Change Settings & Save 

• !! Open Bgckencj first http:/www.doma inname. co.za/wp-admin 

• Edit settings to redirect root page to domain name cmcj not "localhost" 

• Install Search & Replace plugin 

• Change links with plugin & Save 

• Chgnge remaining links thgt cgnnot be changed with plugin 

• Viewing Website & Checking fop errors 


Done! 

Backing Up 

Make a complete backup of both the 'www' folder contents (.zip) and the database (.sql). Remember to save the files to 
a place where you can find it easily. 

Refer back to "Making a Complete Backup" if you cannot remember how to do this. 


Upload the zipped ‘www’ folder contents and extract online 

It's time to use cPanelfor the first time. To upload files through File Manager within cPanei, do the following: 


Log-in to cPanei by going to the link of the domain name followed by :2082 


fy/ Google - Mozilla Firefox 
File Edit View History Bookmarks Tools Help 


| Google 


bestwordpressthemes.co.za:2082 


Domain Name followed by 
:2082 or /cpanel 


/?ttp://www.yourc/omo/nnome.co.za:2082 


or (notice the difference between the two - one has • and the other / 
http://www.yourdomainname.co.za/cpanel 

Both links above should work for redirecting you to the cPanei log-in page. 
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Do the following: Go to http://www. yourdomainname. co.za:2082 




eutsch 


Copy & Paste works Best! 


cPanef 


online Database 

Database Name: 8943jms8u2309vkjs827uj 

Database username: 7Yhw94B 

Database Password: jfhew(l>?{p(*%rn<OAfb<KLPO*yN<P9 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 

Enter Backend: http://! oca! host/wp-admin 


JL h3m2wwd1 
Password 

D Enter your account password. Paste 


espanol espanol de Espana frangais 


site Title: My First website 

Username: h462n27@m885jthdjdf@jcjf@jf jdf 5676er 

Password: HUJD7u4f j499>" :0 — (1 ; 3. . /pcoOi 39. . /P)i9k3d 

Email Used: info@mydomain.co.za 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 
Dns zone check is enabled. cPanel Log-in Information 



<p 


Select All 

Right to left Reading 


Coovriaht £ 2012 cPanel. Inc. 


Show llnirnde cnntrr 



Copy & Paste works best for entering usernames & 
passwords. When finished pasting, select Log in. 


File manager will be used to upload the .zipped 
'www' folder contents. 


The following windows will appear, select the correct domain and click on Log in. 


File- Manager Directory Selection 

Directory Selection 

Please select a directory to open: 


oft 


hpms Directory 


Qgi Web Root (public_html^www ) 
^ Public FTP Root [public_ftp) 


j 


ikouauUiuUu. 


E7 


bestwordpressthemes.co.za [▼ 


Choose 
Domain 

□ Show Hidden Files [dotfiles). 

I Skip this question, and always open this directory in the future when 
opening Fife Manager. 


[ _£°J 


Select Go! 


Note: 

If you have a sub-domain and a root domain, you will have to choose 
the correct domain for file transfer. Sub-domains will not be covered. 
If you followed the steps, you should only have this one domain for 
now. 
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The following window will open in a new tab after clicking Go: 



File Edit View Histoiy Bookmarks 

Tools Help 


CP cPanel X 

| cP cPanel File Manager v3 

x [V | 


~ 4 


bestwordpressthemes. 


ycpsess369439808/frontend/x3/filemanager/index.html?dirselect=webroot&domainselect=bestwordpressthemes.co.za&dir=%2Fhome%2Fh3m2wwdl%2Fpublic_html 


~ C Google 


3 Most Visited [J Getting Started |^i Latest Headlines lot Lorem Ipsum - All the ... 


J 3 « £ J£ _ 6 » 

Folder 

L Dele 


1 ^ 

| Rename Edit Code HTML Change View 

Editor Editor Permiss... 

<f € 

Extract Compre... 

•JV public_html | Go | 

J 

i Delete _ _ 

hne—u^ Up One Level ^3 Back ^Forward V Reload g] Select all ■ Unselect all 


f= Collapse all 

S & (/home/h3m2wwdl) 


ffca-ai' 

E , 1 public ftp 

[p public_html ^ 


L ato> w ' 


D 


By default, public_html & www 
should have the same files within. 
Even if you upload to www, 
public_html will also display the files. 


st Modified (South Afri Type 


Click on the files that are currently located within either the www or public_html folders. You do not need any of these files, you 
will be uploading your own 'www' contents. Delete these files now. 


Two paths to choose: 

Both these folders can be used to upload your files. For the tutorial, you will be using www. (The same as your offline 
version of the website, this will make things easy for you to understand.) 

WWW 

public_html 

Note: 

When you first visit cPanel after obtaining webhosting, some files may be present within these two folders. (The folders 
will show the same files). Go ahead and delete all the files within the public_html or www folder. These files won't be 
needed as you will upload your own files to the www folder. 

After deleting all files. Go to the www folder and select Upload from the Menu: 


File Edit View History Bookmarks Joels Help 


CP cPanel X 


x CP cPanel File Manager v3 


x + 





«■ ; 9 b estwo rd p ressth em es. c o .za :2Q82/ c p s es s369439808/f ro nten d/x3/fi I em a n a g er/i n d ex. htm I ?d i rs-el ect= web ro ot&d omainsel ect= b estwo rd p res sth em es . c o .za Bid ir=%2Fhom e53 


|P|) Most Visited [..j Getting Started (a Latest Headlines Lorem Ipsum - All the ... 


lick on Upload! 



SS J a 

New File New Copy Move Fill 
Folder 


WWW 

f= Collapse all 

C/home/h3m2wwdl) 
C3 access-logs 
E3 etc 

a J 

ftp 

|^a^public_html 
"1-3 tmn 


E* 

.. .Upload .. 


* 

4 


\£ £ 

[l™L 

P 

0 0 

nload 

Delete 

Rename 

Edit Code 

HTML 

Change 

View Extract Compre... 




Editor 

Editor 

Permiss... 



Home 

^ Up One 

Level Back 

Forward 

*2* Reload 

Select all Unselect all 

J 



Li tot* 


Select the 'www' folder. 


This directory is empty. 


j 


Make sure there are no files! 


Select www from the left pane. This will ensure that all files will be uploaded to the www folder. 
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The following window will open within a new tab. 



1 

cPcPaneIX | cP cPanel File Manager v3 IJcPcPanelX NeW tab 1 

^ ® bestwordpressthemes.coza:2082/cpsess369439808/frontend/x3/filemanager/upload-ajax.ht Fh3m2wwdl%2Fwww8idirop=&charset=&file_charset=&baseu 

@l Most Visited (. j Getting Started |^|i Latest Headlines lor Lorem Ipsum - All the ... 


This is the upload window. 


Maximum file size allowed for upload: 1.95 GB 
Please select files to upload to /home/h3m2wwdl/www 

Select the .zipped folder! 

Overwrite existing files: D 
Mode User Group World 


Read 

m 

m 

m 

Write 

m 

n 

s 

Execute 

0 

0 

0 

Permission 

iT 

4 

4 


Back to /home/h3m2wwdl/www 


Browse- J ] click on browse and locate the .zip file that you 
want to upload. (This will be the backup of the 
www folder - offline) 


The above picture indicates the upload page. Select browse to search for the .zip folder. This will be the offline 'www' 
folder that you zipped previously whilst making a complete backup of the website. 


Click on browse and locate the .zip file: 


i5 


Maximum file size allowed for upload: 1.95 GB 
Please select files to upload to /home/h3m2wwdl/www 


Overwrite existing files: D 


Mode 

User 

Group World 

Read 

m 

m 

Bl 

Write 

m 

0 

O 

Execute 

0 

0 

0 

Permission 

6 

4 

4 


^ File Upload 


^ j v 1 , ► Computer ► Local Disk (C:) ► wamp ► temp websites ► myfirstwebsite.co.za ► 



| Browse, 


Organize ▼ New folder 
* Q Libraries 

> 0 Documents 

> j' Music 

t> Pictures 
8 Videos 
1 Homegroup 
> U& BabbaT 
a Computer 
a ^ Local Disk(C:) 

> Intel 
PerfLogs 

t> Ji Program Files 
E> Jl Program Files (x86) 
iX RaidTool 
:> JL Temp 

> Jl Users 
a wamp 

J alias 

> Ji apps 

> Ji bin 

> M lang 

M logs 

j. scripts 

r a ) temp websites 

• ^ myfirstwebsite.co.za 
Ju images 

§ freethemeforest 
"j myfirstwebsite 


images 

§ freethemeforest 

l j mydomainname.co.za details 

myfirstwebsite. sol 


Date modified 
2013/01/25 03:15... 
2013/01/24 09:10 ... 
2012/11/0512:25... 
2013/01/2809:19.. 
- 


Type 
File folder 
File folder 

WinRAR ZIP archive 
Text Document 


3 myfirstwebsite 


2013/01/28 09:57 ... WinRARlZIPlarchive 


Locate the file and select Open. Once clicked, the 
process will begin... 


Will appear in system tray, wait until finished! 



<=■ 


"All Files within Save Folder" 




When done (system tray indication) select back to go to the file manager page. 
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The file manager window will appear. This time it will display the file that was uploaded: 


cP cPanel File Manager v3 


* ® bestwordpressthemes.co.za:2082,'cpsess369439808/frontend/x3/filemanager/index.html?dirselect=webroot&domainselect=bestwordpressthemes.co.za&dir=%2Fhome%2Fh3m2wwdl%2Fpublic_html 


7 C 13 ’ Google 


Most Visited [ J Getting Started ^ Latest Headlines lot Lorem Ipsum - All the ... 


File Manager setting 

§ 







Sea 


SS J 

a i m i • # 


JL £ 

Si 

2? 


€ tf 


New File 

New Copy 

Folder 

Move Fi le L.U.pJ.0 ad. J Down load Delete 

Rename 

Edit Code 

HTML 

Editor 

Ess. 

V.ew 

Extract Compre... 


•V WWW 


[ GO ] Home ^ Up One Level ^ Back 

^ Forward 

S Reload 

\7 Select all B Unselect all 




f= Collapse all 

1=1 & (/home/h3m2wwdl) 
j L3 access-logs 
| -a etc 
$ a_Jmail 
$ ^ public_ftp 
CM |qi public_html 
E L J tmp 

[ajwww ] 


Name 


© myfirstwebsite.zip J Uploaded file! 

File Size. 


Select the uploaded .zip file and click on Extract. 


CP cPanel X 


cP cPanel File Manager v3 


+ 


bestwordpressthemes.co.za:2082 cpsess369439808/frontend/x3/filemanager/index.html?dirselect=webroot&domainselect=bestwordpresstheme 

Most Visited [_] Getting Started |^[i Latest Headlines lot Lorem Ipsum - All the ... 


File Manager 


Step 2: Click Extract! 



to 

J 

A 

m 

* 

* 


\£ 

& 


P 

A 

V 1 

New File 

New 

Folder 

Copy 

Move File 

Upload 

Download 

Delete 

Rename 

Edit 

Code 

Editor 

HTML 

Editor 

Change 

Permiss... 

View 

Extract 




ay/ www 

f= Collapse all 

S (/home/h3m2wwdl) 

|""3 access-logs 
hCfc etc 

[i] public_ftp 

ra public_html 
3 tmp 




Home Up One Level ^ Back ^ Forward "Qk Reload [7 Select all 

Name 


J Extract ) 
fc-QnselecI 




myfirstwebsite.zip 


[ a to www ] 


Step 1: Select file... 


When you click Extract, the following window will display. Change the path to /www. 



Extract 

Extract 

Type the path y 
/publicJitmL^rny 
to {if you enter 

! du wish to extract 
f firstwebsite.zip 

a directory that does not exist it wl be created, and the archive extracted in the 
and press "Extra cf : 

I , 

[ /www 

Change to /www 


i ° 

^ Extract File(s]Jj Cancel | 


Click extract file(s) when ready. 


Extracting Archive 


. ... ... , The files should now extract to the www folder. 

Archrve: ^jjwh d me/h 3 m2 wwd1/public_html/mfy first website, zip J J 

Extraction Location: ^iwww 

rromnroi 
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When the extraction of the folder is done , the following window will appear indicating that the process is finished. Close 
the window when done viewing. 


Name 


When done, this window will 
show. Click close when done 
viewing. 


-7- 

Extraction Results 


Archive : /home/h3m2wwdl/public_html/myf irstwebsite . zip 


inflating: 

license . txt 

□ 

inflating: 

readme.html 


inflating: 

wp-activate .php 


inflating: 

wp-blog-header . php 


inflating: 

wp- comments -post .php 


inflating: 

wp-config.php 


inflating: 

wp-cron.php 


inflating: 

wp-linJcs-opml . php 


inflating: 

wp-load.php 


inflating: 

wp-login.php 


inflating: 

wp-mail .php 


inflating: 

wp-settings .php 


inflating: 

wp - s i gnup . php 


inflating: 

wp-traclcbacJc . php 


inflating: 

xmlrpc.php 


creating: 

wp-admin/ 


inflating: 

wp- admin/ about .php 


inflating: 

wp-admin/admin-aj ax . php 


inflating: 

wp-admin/ admin- f ooter . php 


inflating: 

wp-admin/ admin- f unctions . php 





4 

m 

► 



Close | 


If nothing shows , click on the www on the left side to refresh the page. All the files are now extracted to the www folder 
- online. Depending on the disk space available online and the size of your website , decide if you want to keep the .zip 
folder on the Webserver or not. Just remember, when backing up the website online, not to choose the .zip folder as this 
will increase the size of the backup! 


After extraction, the following will show: 


File Edit View History Bookmarks Tools Help , 


■ | cP cPanel File Manager v3 


7 HL 


tji bestwordpressthemes.co.za:2082/cpsess369439808/frontend/x3/filemanager/index.html?dirselect=webroot&domainselect=bestwordpressthemes.co.za&dir=%2Fhome%2Fh3m2wwdl%2FpublicJitml 

B Most Visited [..} Getting Started B Latest Headlines I Of Lorem Ipsum - All the ... 


ftvel fi 


f= Collapse all 

(/home/h3m2wwdl) 
r "EB access-logs 
!' "tS etc 
>: La Jmail 
!±] J ^ public_ftp 
]....»y P ublic_html 
r 1 atm ° 


f -* ’“■*"* I 




File Manager : 

settings 


Search for 

i 

jQ A fc* $ s 4 

New File New Copy Move File Upload Download Delete 

Si •? 

Rename Edit Code HTML Change View 

Editor Editor Permiss... 

€ f 



Size 

Last Modified (South Afri 

Type 

Peri 

D 

wp-admin 


4KB 

Dec 11, 2012 4:20 PM 

httpd/unix-directory 

075 

ft 

wp-content 


4KB 

Jan 25, 2013 9:58 AM 

httpd/unix-directory 

075 

D 

wp-in eludes 


4KB 

Dec 11, 2012 4:20 PM 

httpd/unix-directory 

075 


index, php 

Files extracted to 'www' folder! It looks exactly the same as the 

395 bytes 

Jan 8, 2012 5:01 PM 

application/x-httpd-php 

064 


icense.txt 

offline version. (WAMP) 

19.46 KB 

May 6, 20127:28 AM 

text/plain 

064 

l 

nrstwebsite.zip ] Delete this file or not. 


14.67 MB 

Today 11:20 AM 

package/x-generic 

064 

m 

readme.html 


8.96 KB 

Nov 30, 2012 12:57 
AM 

text/html 

064 

& 

wp-acthrate.php 


4.55 KB 

Nov 17, 2012 3:11 PM 

application/x-httpd-php 

064 

ay 

wp-blog-header.php 


271 bytes 

Jan 8, 2012 5:01 PM 

application/x-httpd-php 

064 

af 

wp-comments-post.php 


3.44 KB 

Apr 10, 2012 5:21 PM 

application/x-httpd-php 

064 

S 

wp-config.php 


3.08 KB 

Jan 7, 201311:03 AM 

application/x-httpd-php 

064 

& 

wp-cron.php 


2.65 KB 

Sep 23, 20124:57 PM 

application/x-httpd-php 

064 

ay 

wp-links-opml.php 


1.95 KB 

Oct 23, 2010 12:17 PM 

application/x-httpd-php 

064 

ay 

wp-load.php 


2.35 KB 

Oct 26, 20127:40 PM 

application/x-httpd-php 

064 

@ 

wp-login.php 


28.62 KB 

Nov 30, 20121:41 PM 

application/x-httpd-php 

064 

ay 

wp-mail. php 


7.54 KB 

Sep 25, 2012 5:26 AM 

application/x-httpd-php 

064 

@ 

wp-settings.php 


9.67 KB 

Nov 22, 2012 9:52 AM 

application/x-httpd-php 

064 

ay 

wp-signup.php 


17.79 KB 

Sep 11, 2012 12:27 PM 

application/x-httpd-php 

064 

ay 

wp-trackback.php 


3.61 KB 

Jan 8, 2012 5:01 PM 

application/x-httpd-php 

064 

Hf 

xmlrpc.php 


2.66 KB 

Sep 11, 20128:11 PM 

application/x-httpd-php 

064 



The picture above: 

All files are now extracted to the 'www' folder on the online server through cPanel. It's exactly the same as the offline 
WAMP version. The only thing that needs to be done now is for the wp-config.php file to point to the online database. 
Currently, the database reference to the offline WAMP Server and the database has a root user with no password. 

This needs to change! 
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Edit wp-config.php within file manager to point website to Database 

Currently, the wp-config.php file reference to your offline website, (db name, root user and no password) 

For the online version to work, a database username and password must be created. You already have the database 
name. 

Do the following: Open your text file with all the information. Create and enter a db username & db password and click 
save. (This will be used to copy & paste and will serve as a backup). You now have all the information for the website. 

• WordPress Back-end Log-In information 

• Online Database 

• cPanel Log-In information 

Keep this file safe! 


mydomainname.co.za details - Notepad 


File Edit Format View Help 



xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - text file - xxxxxxxxxxxxxxxx 
xxxxxxxxxxxxxxxxxx - Site Title & Log-in information | Email 
Email used: info@mydomain.co.za 

My First offline website 
website Back-End 


xxxxxxxxxxxxxxxxxxxxxxxxx 


username: 

Password: 


online Database 
Database Name 


h462n27@m885jthdjdf@jcjf@jf jdf 5676er 
HUID7u4f j499>" :0--(l ; 3. . /pcoOi 39. . /P)i9k3d 


use Your Email 
Name Your site 


Difficult! - u 
Difficult! - u 


894 3jms8u2 309vkjs827u j Already have db name 


Name of Databa 


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 

J J Create a db Username & Password 

Enter Backend: http: //local host /wp-admin 

DB Username: 7Yhw94B 

site Title: My First website DB Password: jfhew(l>?{P(*%rn<0 A fb<KLP0*yN<P9 

username : h462n27@m885 jthdjdf@jcjf@jf jdf 5676er 

Password: HU3D7u4f j499> M :0— (1 ; 3. . /pcoOi 39. . /P)i9k3d 

Email used: info@mydomain. co. za 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx 


Dns zone check is enabled, 
j New Account info 


| Domain: bestwordpressthemes. co. za 
I UserName: h3m2wwdl 

I Password: udm>:P7GLK?p0d7Hmc09e4 c9ek 
j cpanelMod: x3 
I HomeRoot : /home 
j Feature List: default 

i Language: en Save Document! 


Note: 

It does not matter what you name the new database, as long as the wp-config.php file reference to the correct database. 
It's the tables within the database that counts! 


Do the following after creating a db username & password: Click on wp-config.php - Click on Code Editor: 


File Manager settin 


i id i a ^ 4 

New File New Copy Move File Upload Download Delete 

Folder 

^ A 

Rename Edit 

& 

Code 

Editor 

J? 

HTML Change View 

Editor Permiss... 

€ € 

Extract Comp re... 

SV www [ Go ] 

Home 

Up One Level ^ Back 

^ Forward O Reload Select all fH Unselect all 


f= Collapse all 

fi \& (/home/h 3 m 2 wwdl) 
C 2 access-logs 
•Qi etc 
D- Ea^Jmail 
3 -na ^ public_ftp 
republic html 


I ayy""" ] 



Name step 2 - Click on Code Editor 

ft 

wp-admin 

ft 

wp-content 

ft 

wp-in eludes 

mi 

index, php 

ffl 

license.txt 


myfirstwebsite.zip 

(B 

readme.html 


wp-activate.php 

El 

w p-blo g-header. ph p 

m 

w p-comments-post. ph p 

[~fhp J Step 1 - Click on wp-config.php 


wp-cron.php 

El 

wp-links-opml.php 

El 

wp-Joad.php 
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The following window will appear: 


Code Editor 


Code Editor 

Back up the original file before converting character sets, since this action can produce 
unexpected results. 

You wi be edBng 

/pu bhc.htmVw p-co n fig l ph p 


If encodings are not important to you because you will only be working with English 
or other Western languages, you can disable this dialog by clicking here: 

Disable Erccdirg Check I 


Please select the character encoding to use when opening this file: 
utf-8 


Toggle Help... 

Select Edit 



The window will open in a new tab and within the code editor, the file will display as previously within Notepad++. You 
do not have a new database yet, but once you create it, the database will reference back to this file. 


:P cPanel File Manager v3 


| cP cPanel X - File Manager 


~ C I @ - Google 


t bestwordpressthemes.co.za:2082/cpsess369439808/frontend/x3/filernanager/editit.htrnl?file=wp-config.php&fileop=&dir=%2Fhome%2Fh3m2wwdl%2Fpublic_html&dirop=&charset=&file_charset=utf-8&baseurl=&basedir=&codeedit=l 


_P ik * ' l 



Change the settings. Open your text file and copy the db username and then paste it to the line DB User. Do this as well 
for the DB Password: It should look like this when finished: 



// ** MySQL settings - You can get this info from your web host ** // 


7 /** MySQL hostname */ 

def ine ( ' I IT', ' localhost * ) ; 



/** Database Charset to use in creating database tables. */ 
def ine ( * DB_CHARSET ' , 'utf8'); 

/** The Database Collate type. Don't change this if in doubt, 
define ( ' DB_COLLATE ' , " ) ; 

Make sure you paste between the ' ' brackets! 


*/ 


// Use text editor 



Close 


Save Changes 


Done! Save the file and close the editor. 
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Create a database with MySQL Database Wizard & Update wp-config.php 

You already edited the wp-config.php file so that the file points to the database of the website - online. Now, create a 
database with the same name as the offline version, except this time; enter a username and password as well. Going 
through this process, you will be prompted to choose user privileges at the end. 

Do the following: Within cPanel, go to: MySQL m Database Wizard and click to enter. 


Click ^ Databases * 

MySQL 
MySQL© 
Data bases 

1 

ruiySPL' 

MvSOL© 
Database 
^ \ ^ 

m ** 

phpMyAdmin Remote PostgreSQL PostgreSQL phpPgAdmin 

MySQL Databases Database 

Wizard 


The following window will appear: Enter the database name and select Next Step. 

Important!: Read the following: 

When creating a database online, cPanel will automatically create text (h3m3wwdl_) in front of the database name & 
username. This text (h3m3wwdl_) will be different from every website you will do. Most times ; parts of the server name 
or the domain name will be used. This must be correctly entered into the wp-config.php file as well otherwise the 
reference between the database and Word Press website will not correspond. Simply open the wp-config.php file and 
amend the changes. A sample of the wp-config.php file will be shown at the end of these processes. 



MySQL® Database Wizard 

jft| Video Tutorial | 


Create a Database Name 


MySQL Databases allow you to store lots of information in an easy to access manner. The databases themselves are not 
easily read by humans. MySQL databases are required by many web applications including some bulletin boards, content 
management systems, and others. To use a database, you'll need to create it. Only MySQL Users (different than mail or 
other users) that have privileges to access a database can read from or write to that database. 


St ep 1: Create A Database 

^New Database: h3m2wwdl_ )43jms8u2309vkjs827uj Q 
Next Step | 


Important! 

Copy the code before the name (? J to 
your file and edit the wp-config file once 
more! cPanel creates extensions.... 
Update your files! 


Home ■ Trademarks ■ Help ■ Documentation ■ Contact ■ Logout 


In the next step, you must enter the database username and password: Again, for the username cPanel will need you to 
enter?_ in front of the username within the wp-config.php file. Make sure to save all information to your text file. 


Do the following: 



Create a database Username and create a 
Password. You can generate a password as well, 
make sure to save the information to your text 

file. 


Click "Create User" when finished. 
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The following windows will appear: 



Select "All Privileges" and select Next Step to create 
database. 


Tip: 

By using the Database Wizard, the user will be 
automatically added to the database. 


Remember to update the wp-config.phpfile so that the 
information will correspond with the database. 


The following window will appear when you select Next Step from above: 





cpnnEL 11 


^ , MySQL® Database Wizard 
Step 4: Complete the task 


The Wizard added a user to the database. 


pilser , ’h3m2wwdl_7Yhw94B ,T was added to the database "h3m2wwdl_8943jms8u2309vkjs827uj ,> .^| 

Add another database. 

Add another user for your MySQL database. 

Click on Return Home to Accept Changes. 

Home ■ Trademarks ■ Help ■ Documentation ■ Contact ■ Logout 


The database is created with a name, username and password. Update the wp-config.php by doing the following: 

Go to File Manager and select the wp-config.phpfile. Edit with Code Editor. Add the settings! (_?). Save Changes when 
done and close the file. You are done uploading the files as well as editing the wp-config.php file. 


* Installation. You don't have to use the web site, you can 

* to "wp-config.php" and fill in the values. 

* ©package WordPress 

Edit: wp-config.php 

// ** MySQL settings - You can get this info from your web hoa 


mm 


mm 


imBawnwBmw 


'** MySQL database passvrord */ 
lef ine ( ' DB PASSWORD', ' jfhev; (1>?{ P (*%rn<0~fb<KLP0*yN<P9 • ) 


* :-:y- r.:3:r.aite ’/ 
define ( ' DB_HOST • , ' localhost ' ) ; 


/** Database Charset to use in creating database tables, 
define (' DB_CHARSET ' , 'utf8'); 


/** xhe Database Collate type. Don't change this if in doubt, 
define ( • DB_COLLATE • , " ) ; 
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File Edit Format View Help 


xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx - text file - XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX) 
xxxxxxxxxxxxxxxxxx - site Title & Log-in information | Email - xxxxxxxxxxxxxxxxx> 
Email Used: info@mydomain. co. za 

My First offline website 
website Back-End 


username : 
password : 


onlir 


h462n27@m885jthdjdf@jcjf@jf jdf 5676er 
HUDD7u4f j499>" :0 — (1 ; 3. . /pcoOi 39. . /P)i 9k3d 


atabase Username: 


h 3 m2 wwd 1_7 Yhw94 B 


Database Password: jf hew(l>?{P(*%rn<OAf b<KLP0*yN<P9 


•fJc: 


XXXXXXXXXXX) 


Enter Backend: http://localhost/wp-admin 

site Title: My First website 

Username : h462n27@m885jthdjdf@jcjf@jf jdf 5676er 

Password: HUDD7u4f j499>" :0 — (1; 3. ./pcoOi 39. ./P)i9k3d 

Email used: info@mydomain. co. za 

XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX) 

Dns zone check i s enabi ed. Remember to update your text file ! 
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Import saved database (saved .sql) with phpMyAdmin 

You have just created a database. (Two options are available, you can either do a new installation of WordPress or you 
can import an existing website (saved .sql file) to use.) You will however, import as you have already designed a website 
and saved a database file for this purpose. 

Note: 

When importing a database from a .sql point of view, it does not matter what you name the file or the database name. 
The database will still work even if you change the name, just remember to update the files that correspond with the 
database tables, (wp-config.php) 

Within cPanel, go to phpMyAdmin and open: 


Databases * 

MySQL® MySQL® 

Databases Database 
Wizard 

t&yAdmin 

phcMvAdmin 

9 **% ^ 

Remote PostgreSQL PostgreSQL phpPg Admin 

MySQL Databases Database 

Wizard 


The following window will appear: The online phpMyAdmin works in the same way as the WAMP version. Select the 
database that you created and click on it: 


File Edit View History Bookmarks Tools Help 


x[ bestwordpressthemes.co.za / localho... x | + | 


cPcPaneIX 

^ d bestwordpressthemes.co.za:2082 cpsess7502059793/3rdparty/phpMyAdmin/'index.php#PMAURLserver=l&target=main.php&token=eec29d433blc3d650452d28b5cle2acc 

Most Visited [..] Getting Started Latest Headlines lot Lorem Ipsum - All the ... 


-L\ 



When accessing the database by clicking on it, the following window will appear: The database is currently empty! 


File Edit View History Bookmarks Tools Help 


cP cPanel X 


^ bestwordpressthemes.co.za / localho... x + 



bestwordpressthemes.co.za:2082 cpsess7502059793/3rdparty/phpMyAdmin/index.php?db=h3m2wwdl_8943jms8u2309vkjs827uj8dtoken=eec29d433blc3d650452d28b5cle2acc#PMAURL:db=h3m2wwdl_8943jms 

[Pji Most Visited [_j Getting Started |^ii Latest Headlines lor Lorem Ipsum - All the ... 


phpMyAdmin 

& % # 0 ^ 


(Recent tables) ... 


k 


h3m2wwd 1 _8943j ms8i 


0 


No tables found in database. 


Create table 


localhost » | h3m2wwd1_8943jms8u2309vkjs827uj 


M Structure SQL -4 Search (j Query 3 Export | Import | ^ Operations <s^| Routines ® Events 2* Triggers 

No tables found in database 

Click on Import! 

Number of columns: 


Create table 


Name: 


The database is still empty, you need to import the saved data! (.sql) 
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Click on Import, this will allow you to import the saved .sql file from the offline website. (You saved this earlier.) 



The following will indicate that the file is uploading: Once done, phpMyAdmin will show that the file was successfully 
imported. 


File to Import: 

File may be compresset 
A compressed file's nam 

Browse your computerj 
Character set of the file 

1 (gzip) or uncompressed. 

le must end in .[form at]. [compression] Example: .sql. zip 

Please be patient, the file is being uploaded. Details about the upload are not available. 

utf-8 

a 




Edit wp-options file within phpMyAdmin | Change Settings & Save 


CP cPanel X | ^ bestwordpressthemes. co.za / localho... x J + 

4- *4 bestwordpressthemes.co^a:2082/cpsess7502059793/3rdparty/phpMyAdmin/index.php?db=h3m2wwdl_8943jms8u2309vkjs827uj&token=eec29d433blc3d650452d28b5cle2acc#PMAURL:db=h3m2wwdl_8943jms8u2309vkjs827uj&sefvei 

|P) Most Visited [..] Getting Started [&{i Latest Headlines (or Lorem Ipsum - All the ... 

phpMyAdmin 

& 4 # © $ 

(Recent tables)... 0 ^ 

1 t^flocalhost » ■ h3m2wwd1_8943jms8u2309vkjs827uj 

34 Structure fj SQL -4 Search j Query [*3 Export S Import Operations Routines ® Events 3fe Triggers 

1 ✓ Import has been successfully finished, 62 queries executed, (myfirstwebsite^ql^^j 


Importing into the database "h3m2wwd1_8943jms8u2309vkjs827uj" 

ortant! 

File to Import: 

h3m2wwd1_8943jms8u230 

g wp_commentmeta 
g wp_comments 
wplinks 

L w P options J Mm imD 
J wp_postmeta 
iHj wp_posts 
g wp_terms 
M\ wp_term_relationships 
g wp_term_taxonomy 
g wp_usermeta 
H wp_users 

File may be compressed (gzip) or uncompressed. 

A compressed file's name must end in .[format]. [compression] Example: .sql. zip 
Browse your computer: Browse. | (Max: 512MiB) 

Character set of the file: utf-8 H 

Partial Import: 

Create table 


[V] Allow the interruption of an import in case the script detects it is close to the PHP timeout limit. (This might be a good way to import large files, however it can break transactions.) 
Number of rows to skip, starting from the first row: | 0 

Format: 

1 SQL 0| 

Format-Specific Options: 

SQL compatibility mode: NONE H # 

E) Do not use adto_increment for zero values % 

da) 


The following window will appear. 
Please note that an important 
setting needs to change before 
moving on! 

The file uploaded successfully! 

The website will work (or not), but 
with errors. An important setting 
needs to change in order for the 
website to redirect correctly. 

Do not forget to do this! 

On the left pane, click and select 
wp-options. This file MUST be 
edited! 
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After selecting wp-options on the left pane, the following window will appear. You must change the path ofthesiteurl in 
order for the website to redirect to the correct URL. Currently, the website still refers to local host, which is the offline 
version of the website. This will not work online. 


Change it to the following by clicking on the Edit field: 


i 


|>c Copy Q) Delete 1 

siteurl 

http://loc.al host 

yes 

0 Edit 

You can also edit most columns 
by clicking directly on their conte n 

L 

jgname 

My First Website 

yes 


http://localhost 

to 

http//www.yourdoaminname.co.za 

The path that will be used is the root URL of the domain. This means no subpages etc.; it must be the direct website 
address! 



<J dl* bestwordpressthemes.co.za / localho... x j_H 


^ ri bestwordpressthemes.co.za:2082 cpsess7502059793/3rdparty/phpMyAdmin/index.php?db=h3m2wwdl_8943jms8u2309vkjs827uj&token=eec29d433blc3d650452d28b5cle2acc#PMAURL 

@l Most Visited (J Getting Started l^[i Latest Headlines lor Lorem Ipsum - All the ... 

phpMyAdmin 


flfc 4 ® 0 


a 


| h3m2wwd1_8943jms8u23g| 

13 wp_commentmeta 
3 wp_comments 
wpjinks 

3 wp_postmeta 
3 wp_posts 
3 wp_terms 
3 wp_term_relationships 
3 wp_term_taxonomy 
3 wp_usermeta 
3 wp_users 

ijj Create table 


localhost » 9 h3m2wwd1_8943jms8u2309vkjs827uj »B wp_options 


§ Browse M Structure fj SQL -i Search >= Insert @ Export => Import Operations 36> Triggers 


<✓ Showing rows 0 - 29 ( -293 total & , Query took 0.0006 sec) 


SELECT* 

FROM'wp_options' Important: Change the path!!! 

LIMIT 0,30 


> » Show : Start row: 1 30 j Number of rows: 1 30 Headers every 100 | i 


Sort by key: None 


M 


http://localhost refers to Offline! 

Change to http://www.yourdomainname.co.za 


|° J -ntj*; cop 

siteurl | 

http://localhost 

y6S — 

□ Edit Cop’ 

blogname 

My hirst weEsite 

yes 

O # Edit |a Copy Delete 3 

blogdescription 

Just another WordPress site 

yes 

□ # Edit Copy @ Delete 4 

users_can_register 

0 

yes 

O # Edit |« Copy Delete 5 

admin_email 

infb@mydomain.co.za 

yes 

|3 Edit Copy ^ Delete 6 

startofweek 

1 

yes 

0 # Edit Copy Q Delete 7 

usebalanceTags 

1 

yes 

0 Edit Copy ^ Delete 8 

usesmilies 

1 

yes 

|F] # Edit Copy Delete 9 

requirenameemail 

1 

yes 

□ Edit Copy Delete 10 

commentsnotify 

1 

yes 

O # Edit Ja Copy Q Delete 11 

postsperrss 

10 

yes 


After selecting edit , the following window will 


| bestwordpressthemes.co.za / localho... x | + 


^ bestwordpressthemes.coza:2082/cpsess7502059793/3rdparty/phpMyAdmin/index.php?db=h3m2wwdl_8943jms8u2309vkjs827uj&token=eec29d433blc3d650452d28b5cle2acc#PMAURLdb=h3m2wwdlJ 


S Most Visited [.j Getting Started Si Latest Headlines lor Lorem Ipsum - All the ... 

phpMyAdmin 


& i# & 


(Recent tables) ... 


Jl 


h3m2wwd1_8943jms8u230 


m wp_commentmeta 
g wp_comments 
g wpjinks 
g wp_options 
|J wp_postmeta 
U wp_posts 
13 wpjerms 
J wpJerm_relationships 
g wpjermjaxonomy 
g wp_usermeta 
g wp_users 

Q Create table 


option.nam. 

} varchar(64) 

0 | siteurl 





h3m2wwd1_8943jms8u2309vkjs827uj »| 


H Browse Structure fj SQL -4 Search >■ Insert © Export @ Import Operations te Triggers 
Column Type Function Null Value 

optionjd bigint(20) unsigned | 


0 



Change to: 

http://www.yourdomainname.co.za 


Go I Select Go to save changes! 


Q andthen Go back to previous page [a|| 


Go Reset 


appear: 


Remember , this step must be done within 
phpMyAdmin , otherwise the website will not 
work. 

Tip: 

The same process will apply when moving the 
website from online to offline. 

Save all changes and exit the window. 


Results: 


□ Edit Copy @ Delete 1 

siteurl 

htt p://www. be st wo rd pre s st h e m e s .c o .z a 

yes 
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Open Back-End First! http://www.yourdoaminname.co.za/wp-admin 

Important! Another important link needs to be changed from http://localhost to www^youi^ This 

time, the link will be changed within the Back-end of Word Press. It is important, because the site link still refers to the 
offline website (local host- WAMP). Do not view the website, go directly to the backend of the website by using the wp- 
admin at the end of the domain url: 

http://www.yourdoaminname.co.za/wp-admin 

Do the following: 

Go to the backend of Word Press by using the wp-admin option at the end of the domain url. 


CP cPaneIX 


; ; New Tab 


x , + 


bestwordpressthemes.co.za/wp-admin| Wp-3Cl mifl at the end] 


The following Log In window will appear. Fill out the information and enter the Back-end. 

WordPress 

✓ 

Username 

jthdjdf@jcjf@jfjdf5676er 

Password 

»•••••••••< 

□ Remember Me 

Lost your password? 

— Back to f .1 First v'vebsite 




When entering the back-end, go directly to the following and change the information (url link): 

Go to: Settings/General: Change the link to http:www.yourdomainname.co.za. 

This must be done otherwise you will encounter errors. 


Edit settings to redirect root page to domain name and not "localhost" 


I [. J General Settings < My First Website — ... x 


bestwordpressthemes.co.za wp-admin/options-general.php 


* 3 * 

Most Visited [..} Getting Started |%ti Latest Headlines lot Lorem Ipsum - All the ... 


My First Website O 1 


{q} Dashboard 
& Posts 
/P Slider 
G°{| Media 
[0 Pages 
<p) Comments 
§ Appearance 
$ Plugins 
Users 
ti Tools 


| General 

Reading 

Discussion 

Media 

Permalinks 

© Novatorix 

* Collapse menu 


^General Settings ^1 change to online link and Save Changes! 


WordPress 3.5.1 is available! 


WordPress Address (URL) 
Site Address (URL) 


E-mail Address 


Membership 

New User Default Role 


Just another WordPress site 
In a few words, explain what this site is about 


http : / /www . bestwordpresst hemes . c 


I http://localhost| 


Both should be this link! 
s for offline. 




Jlhis isf 


i c... ■' .. C...' ■ ;.'t 


info@mydomain.co.za 

This address is used for admin purposes, like new user notification. 

H Anyone can register 
Subscriber |V| 

UTC+O g UTCtime is 2013-01-29 8:52:09 

Choose a city in the same timezone as you. 

@ January 29, 2013 
©2013/01/29 
©01/29/2013 
©29/01/2013 

©Custom: Fj.Y January 29, 2013 
Documentation on date and time formatting . 


Save Changes when done! 

For now, the main links are changed to the 
relevant paths. However, some links within 
the website may still point to 
http://localhost. 

This is easy to fix, in the next lesson you will 
install a plugin that will change all the links 
for you. 

Note: 

On small (page only) sites this step won't be 
necessary, but for sites with a lot of pages it 
is a must! You don't want visitors to go to 
"broken" pages or posts. 


WordPress Address (URLl 


C 


Site Address [URL) 




http : / /vjvm . bestwordpressthemes . co . za 
http ://www. bestwordpressthemes . co. za 

Eftter the address here if you want your site homepage to be different from the director / you instated WordPress. 
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Install Search & Replace plugin 

The website used for this sample doesn't have a lot of links (not yet). If you have a website with lots of links, slideshows 
and external documents or files that can be downloaded, it will be necessary to change these links. Now this can be a 
difficult task if you want to do it manually, but with the help of a plugin this process can take a few seconds. 


Do the following: Go to Plugins/Add New. Search for the plugin: Search & Replace: 


CP cPanel X 


[ j Install Plugins < My First Website — ... + 


4 - 9 www.bestwordpressthemes.co.za 'wp-admin/plugin-install.php 


Most Visited [.J Getting Started [&ii Latest Headlines lof Lorem Ipsum - All the ... 


{£} Dashboard 
Posts 
Slider 
C°j] Media 
[£] Pages 
Comments 
H] Appearance 


Installec^lugins 
<!£> Users 

Tfi Tools 

U?1 Settings 
@ Novatorix 


WordPress 3.5.1 is available! Please update now . 

Install Plugins Install a plugin that will help you change a lot of links! 

Search | Upload | Featured | Popular | Newest | Favorites 

Plugins extend and expand the functionality of WordPress. You may automatically install plugins from the WordPress Plugin Directory or upload a plugin in .zip format via this page . 


Search 

I search ^ 


search & replace! 


Search Plugins 


D 


Search for "Search & Replace". 


Popular tags 

You may also browse based on the most popular tags in the Plugin Directory 


admin AJAX buddypress category comment Comments content email FacebOOk feed flash gallery google image images javascript 
jquery link links media page pages photo photos plugin Post posts rss seo shortcode sidebar social spam stats twitter video 
widget widgets wordpress voutube 


Go ahead and install the Search & Replace Plugin: 


^|| f j Install Plugins < My First Website — ... x [ + 


^ & www.bestwordpressthemes.coia/wp-admin/plugin-install.php?tab=search&s=search+%26+replace&plugin-search-input= Search* Plugins 

|p|i Most Visited [.J Getting Started |%|i Latest Headlines lot Lorem Ipsum - All the ... 


e a- Google 


My First Website O 1 



Installe^Plugins 

[Add New j 

Users 

Tfi Tools 

[Sf] Settings 
© Novatorix 


WordPress 3.5.1 is available! Please update now . 


0 Install Plugins 

Search | Search Results | Upload | Featured | Popular | Newest | Favorites 

Keyword [V] (search & replace Search Plugins 


Name 


Version 

Rating 

Description 

^Search and Replace 

Install This One! 

2.6.5 


A simple search for find strings in your database and replace the string. You can search in ID, post-content, GUID, titel, excerpt, meta-data, comments, com 
comment-url, tags/categories and categories-description. It is possible to replace the user-ID in all tables and the user-login for more security in the WordF 

1 j A 

Safe Search Replace 

Details | Install Now 


2.0.1 


Shortcodes 

Quite a lot of plugins use shortcodes - deactivating them leaves your shortcodes 
unused and plain to your visitors. With this feature, you can remove existing 
shortcodes, rename them (In case of an update or plugin switch), and even 
remove, rename and add their attributes. 

Search and replace made easy 

Easily search in your post titles, contents, excerpts and comments for 
words and ... By Benjamin Sommer. 

Advanced Search by My Solr Server 

Details | Install Now 

2.0.4 


In order to make Advanced Search by My Solr Server plugin work, you need a Solr server installed and configured with the provided schema.xml file. 
If you don't have the time or resources to install, configure and maintain a Solr server, My Solr Server do it for you ! 

What is My Solr Server ? 

My Solr Server is a Software as a Service Apache Solr enterprise search platform (http://www.mysolrserve . . By www.mysolrserver.com. 

Change Search Parameter 

Details | Install Now 


1.0.0 


This plugin replaces or changes the defUalt inbuilt search query parameter in WordPress with your custom search query parameter. 
Visit Change Search Parameter Plugin Homepage for more information. 

Contact Me if you will like to see any other feature on this plugin. By Pritesh Gupta. 


Once installed, activate the plugin: 



Installing Plugin: Search and Replace 2.6.5 


Downloading install package from http : //downloads, wordpress. org/plugin/search-and-replace .2.6.5. zip. 


Unpacking the package... 

Installing the plugin... 

Successfully installed the plugin Search and Replace 2.6.5, 

Return to Plugin Installer Activate the plugin! 

Activate this plugin 
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The following page will appear when activated click on settings: 


□ 

Plugin Select Settings! 

Description 

□ 

SearcJ^ Replace 
jSettingsjlDeactivate | Edit 

A simple search for find strings in your database and replace the string. 
Version 2.6. S | By Frank Bultge | Visit plugin site 

□ 

Plugin 

Description 

(Note: 


All previous plugins have been deleted from the sample site, you may still have them installed.) 
When this windows appear, select "ALL" from the checkbox. 


luiomutxm Search & Replace 



Now, within the text field, type the URL's you wish to change. For the sample, the following will be used: 
Search for: http://localhost 

Replace with: http://www.bestwordpressthemes.co.za 


Change links with plugin & Save 


Comments author 
Comments author e-mail 
Comments author URL 
Comments-Counter 
Category description 
Tags & Categories 
User-ID 
User-login 
ID 


field: comment_author 
table: _comments 

field: comment_author_email 
table: _comments 

field: comment_author_url 
table: _comments 
field: comment_count 
table: _posts 

field: description 
table: _term_taxonomy 

field: name and slug 
table: _terms 


field: ID . user 
table: _users , 


.id . post_author , 
_u serine t a , _posts , 


iser_id and link_owner 
_comments and _links 


field: i 
table: 


ser_login and i 
.users 


•_mcename 


field: ID . post_parent . post_id . object_id and comments 
table. _posts , _postmeta , _term_relationships and _comment_pc 


Select All! 


Search for 
Replaced with 


http : //localhost 


| http: 


Offline 


//www. bestwordpressthemes . co. za 


Online 


[ Go » 1 Select Go to Save and Change. 


After saving, the files should have 
changed to follow the correct URL 
path. 


Pom 
ft Slider 
Media 

Search & Replace 

■ Attempting to perform search and replace ... 

ip Comments 

Results Page. 

g Appearance 
l’f Plugins 
<£ Users 

Looking @ post contem 

•liable posts fisld post.eontent 11 2 sntnos (bund 
Looking $ ID 

m (able posts Held 10 -0 entnes found 
. si table posts Hold post parent - 0 entries found 


r m table post sets field post.id - 0 entnes found 

I Available Tods 

>i tapis tem.reletlonsMpt Hold ooject.ld • 0 sntrios found 

Import 
[ Export 

Search A Replace 

n table cooeents field cMmentjiost.lt) - 0 entnes found 
Looking (J QUID 

Jffj Settings 

Looking @ Titeln 

*i table posts field post .title 0 entnes bund 

&) Novatorix 

•liable posts field post.nooe 0 entnes found 


Looking @ post excerpts 

ntablo posts field post.exeerpt 0 onlnes ftxind 


Looking @ Meta Dated 

m table postoeto field •eta.velue III - 3 entnes found 


looking Q modd,mg comments text 

in table coeoents field cueoent.content - 0 entnes found 


Looking @ modeling comments autfioi 


Tip: The same process can be followed when moving a website from online to offline. It's a repeated process! For online, 
search for domain name and replace with localhost. 
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Change the remaining links that cannot be changed with Plugin 

When a website uses third party plugins and widgets , slider or logo images , then some may require that you change the 
links manually. In the case of sliders, you have to check whether the link is local host or otherwise. It is important to check 
all links that was entered manually, as these links will probably still be linked to localhost. 

You do not want a visitor to click on a link and receive a blank page! 

Viewing Website & Checking for Errors 

It's time to the view the "Online" website for the first time. If you followed the steps it should display correctly and the 
website should be working. 

View the Online Website: 

Notice the URL: http^/www^bes^ djpresstjiemesxo^za (Online!) 


C 


wv bestwordpressthemes.co.za 


| : : Dashboard < My First Website — Wor... | i i My First Website 

D 


r L±J 


Most Visited i Getting Started Latest Headlines lot Lorem Ipsum - All the .. 



Congratulations. You've just created your own website and you uploaded it to the web. The website can be used as it is 
for now, but a few minor changes can still be done. 

Note: 

Good websites never stop working. Updating a website regularly is not a must, but it is good practise. 
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[Back to Topi 


Changing the "Permalinks" 

The Word Press Permalinks structure is currently set to default. This will display pages and posts with the following: 


Default permalink: The link underneath is the Blog page. Here it is shown with a page id: 
httD://www.bestwordnressthemes.co.za/?Daae id=6 

In order for the page to display: httD://www.bestwordDressthemes.co.za/bloa/ you will have to change the permalinks. 
Go to: Settings/Permalinks 


Choose an option from the list given: 

For the sample, "Month and name" will be used: 


[ Permalink Settings t My First Website ... x Blog « My First Website 


^ www, bestwordpressthemes, co.za/wp-admin/options-permalink.php 


Most Visited [_] Getting Started Jfc.i Latest Headlines Lorem Ipsum - All the ... 


My First Website 


Dashboard 
& Posts 
# Slider 
C§|j Media 
[P Pages 
<5 ) Comments 

Q Appearance 
0 Plugins 
(gj Users 
fj Tools 

n 


General 

Writing 

Reading 

Discussion 

@ Novatorix 

(V) Collapse menu 


WordPress 3.5.1 is available! 


Permalink Settings 


To view the urk 
http ://www. bestwordpresst hemes. co. z; /blog/ 


Permalink structure updated. 


By default WordPress uses web URLs which have question marks and lots of numbers in them, however WordPress offers you the ability to create a 
of tags are available , and here are some examples to get you started. 

Common Settings 


© Default 
© Day and name 
■££' Month and name 


] 


Numeric 
© Post name 
© Custom Structure 


http : //www, bestwordpresst hemes , co. za/?p=123 

http : //www . bestwordpressthemes . co . za/2013/01/29/sample- post/ 

http : //www, bestwordpressthemes . co. za/2013/01/sample-post/ 

http : //www. bestwordpressthemes . co. za/archives/123 

http : //www, bestwordpressthemes , co. z a/ sample -post/ 

http : / /www, bestwordpressthemes , co. za /%year%/%monthnurt^/%postnanie%/ 


Optional 

If you like, you may enter custom structures for your category and tag URLs here. For example, using topics as your category base would make y 
Category base 
Tag base 


t ) Save to Accept Changes 


After saving, the website URL for the blog page will now be shown as: 
http://www.bestwordpressthemes.co.za/blog 

Choose any option you prefer. This will display the URL (site/page/post address) with the specific page heading etc. You 
do not need to change any pages, just change the permalink structure and you're set to go. 

Note: 

Some Custom Themes can only have a specific permalink structure. When deciding to use a custom theme, always check 
the help documentation. Most themes are well documented and you will find all the answers within the documentation. 
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Index Your Website! 

What is the use of a good website if nobody can find it! The easiest way of making your website get indexed is by using 
Google Webmaster Tools. It's a free service unlike Google Ad Words. Whilst Ad Words is a great resource, it will not be 
covered here. Please note that only Google index will be covered and not Bing. You can find external links on the XML 
plugin page for more information. 

When indexing, please note that this takes time. You are also not guaranteed that all of your pages will be indexed! 
Sometimes indexing takes a month or up to 3 months, or even longer. Many elements are considered. But for the lesson, 
you will be shown the easiest way for indexing, fingers crossed. 

What needs to be done: 


• Create a .xml Sitemap 

• Create an Google Webmaster Tools Account 

• Sumbit the.xml sitemap to Google. 

Create an .xml Sitemap 

First, you need to create a sitemap for the website. This is a list of the pages/post of your website that can be crawled by 
Google Bots. With the help of the Google XML Sitemap plugin, the sitemap will be created for you. 

To display the XML Sitemap, simply enter the domain URL address followed by /sitemap.xml 

http://www.bestwordpressthemes.co.za/sitemap.xml 

Do the following: Go to Plugins/Add New: 

Search for the following keywords: google XML sitemaps 



0 Install Plugins 

Search | Search Results | Upload | Featured | Popular | Newest | Favorites 


Keyword 


@ Appearance 

[ ] 

Installed Plugins 

(f\ Users 
|J Tools 
gf] Settings 


r Google XML Sitema ps 
Details flnstal^o^ Install Plugin! 


Better WordPress Google XML Sitemaps (with si 
Google News sitemap support) 

Details | Install Now 

Google XML Sitemaps v3 for qTranslate 

Details | Install Now 

Google XML Sitemap 

Details | Install Now 


Google XML Sitemap for Videos 

Details | Install Now 


Google XML Sitemap for Mobile 

Details | Install Now 


This plugin will generate a special XML sitemap which will hej^yy| 
much easier for the crawlers to see the complete structureEfyoursiti 
custom URLs Additionally it notifies all major search ... BlArneBra 


s like Google. Bing. Yahoo an^w 
Irieve it more efficiently. The plugir 


* )£{ 'll With BWP GXS you will no longer have to worry about the 50.000 URL limit or the time it takes for a sitemap to 
resource and can be extended via your very own modules (yes, no hooks needed!). Here's a demo of the sitem; 
===New in 1.2.0!= 

The long-awaited BWP GXS 1.2.0 has finally been released with a new and very... By Khang Minh. 
***** This plugin will generate a special XML sitemap which will help search engines like Google, Bing, Yahoo and At 
much easier for the crawlers to see the complete structure of your site and retrieve it more efficiently. The plugir 
custom URLs. Additionally it notifies all major search ... By DSmidgy, NeoEGM, Arne Brachhold. 
***** Sitemaps are a way to tell Google about pages on your site we might not otherwise discover. 

In its simplest terms, a XML Sitemap-usually called Sitemap, with a capital S-is a list of the pages on your web 
Creating and submitting a Sitemap helps make sure that Google knows about all the pages on your site, includ 
crawling process. By Cor van Noorloos. 

***** Sitemaps are a way to tell Google, Bing and other search engines about web pages, images and video content 
The Video Sitemap plugin will generate an XML Sitemap for your WordPress blog using all YouTube videos that 
Your Video Sitemap will includes web pages which embed videos from YouTube or which links ... By Amit Agar 
***** Sitemaps are a way to tell Google, Bing and other search engines about web pages, images and video content 
The Mobile Sitemap plugin will generate a sitemap for your WordPress blog with URLs that serve mobile web cr 


Install and Activate the Plugin. After activation, the plugin will be found at the Settings Page. 
Go to: Settings/XML-Sitemap: 



XML Sitemap Generator for WordPress 3.2.9 

The sitemap wasn't generated yet. 

[ ] Click Here to Build the Sitemap! 

hi can us* the d ebug lunction to ft more xiformatKin 

There is a new beta version of this phign amiable which supports the new mulb-sae feature of WordPress as * 


All settings will be left default for the sample. 


H! Wnte a normal XML U« (your filename) 
91 Wnte a gripped file (your tenants ♦ gz) 



0 notify Bing (formerly MSN Lne Search) about updates of your Bog 
0 Add sitemap URL to the virtual robots txt lile 


Lima the number of posts in the sitemap (Newer posts t 

Try to increase the memory Intel to (e g '4W ‘ISM") 

Try to increase the execution time limp to (ei seconds, e g 160" or "0" for unlimited) 

Includ* a XSLT stylesheet (Full or retain* URL to your xsl te) SB Us* default 

D Enable MySQL standard mode Use this only if you're getting MySQL errors (Needs much more memory!) 
0 Build the sitemap in a background process (You donl have to wad when you save a post) 
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At the top of the page , click on " Click Here" to build it the first time. This will generate a sitemap for the website. 


^^l^itema^wa^nTgeiiera te^et^ Before! 

The sitemap wasn't built build it the first time., 

If you encounter any problems with the build process you can use the debug function to get more information. 

There is a new beta version of this plugin available which supports the new multi-site feature of WordPress as well as many other new functions! More information and download 


XML Sitemap Generator for WordPress 3.2.9 

Result of the last build process., started on January 29, 2013 1:18 pm. After ! 


Your sitemap was last built on January 29, 2013 1:18 pm. 

Your sitemap (zipped ! was last built on January 29, 2013 1:18 pm. 

Google was successfully notified about changes. 

Bing was successfully notified about changes. 

The building process took about 6.08 seconds to complete and used 25.25 MB of memory. 

If you changed something on your server or blog, you should rebuild the sitemap manually. 

If you encounter any problems with the build process you can use the debug function to get more information. 

There is a new beta version of this plugin available which supports the new multi-site feature of WordPress as well as many other new functions! More information and download 


To view the sitemap , type the domain name followed by /sitemap.xml 
Preview of Sitemap: htto://www.bestwordoressthemes.co.za/sitemaD.xml 


XML Sitemap - Mozilla Fi refox 
File Edit View History Bookmarks Tools Help 


f_j XML- Sitemap Generator < My First W„. [_j XML Sitemap 


x + 


«■)» 


www. bestword pressth em es. co.za/ sitem a p.xm I 


Most Visited j__.j Getting Started l- : Latest Headlines ItTf' Lorem Ipsum - All the ... 


XML Sitemap 


Sitemap for www.bestwordpressthemes.co.za 


This is a XML Sitemap which is supposed to be processed by search engines like Google . MSN Search and YAHOO . 

It was generated using the Blogging-Software WordPress and the Google Sitemap Generator Plugin by Arne Brachhold . 
You can find more information about XML sitemaps on sitemaps.org and Google's list of sitemap programs . 


URL 


http:/ .■‘www.bestwordpresstherriies.CQ.za; 


http: / j www . bestwo rd p ressth e me 5 . co . za / 2 01 3 [ 0 II / m y-f i rst- po st [ 

http: / / www . bestwo rd p ressth e me s . co . za/ 2 0 1 3 [ 0 1 / m v-s i xth - post / 

http: / www.bestwordpresstheme5-CQ.za/2Q1 3/01 /mv-fifth-post/ 

http: / ■ www. bestwo rdp ressth ernes -co.za: 1 201 3/ 01 / mv-fourth-post; 

http: / ■ www . bestwo rd p ressth e me s . cq . za »' 2 0 1 3 [ 0 1 ■' mv-th i rd -p ost / 

http:/ .■'www.bestwordpre5stheme5.CQ.za ■'201 3/ 01 ■' mv-second-post 

http: / [ www . bestwo rd p ressth enies.co. za/ cq ntact -us.' 

http: / ,■ www.bestwordpressthemes-CQ.za zb log; 

http:.- ■ www.bestwordpre5stheme5.CQ.za ‘term 5 -conditions/ 

http: / / www . bestwo rd p ressth emes.co. za/ p r i vacy- pel i cy / 

http: / / www . bestwo rd p ressth emes.co.za ; a bo ut-u 5 / 

htt p : / www . bestwo rd p res st h e me s . co . za j p rod ucts [ 


Generated with Google Sitemap Generator Plugin for WordPress by Arne Brachhold . 


Priority 

Change Frequency 

LastChange (GMT) 

100ft 

Daily 

2013-01-24 21 :1S 

20% 

Monthly 

2013-01-24 20:24 

20% 

Monthly 

2013-01-24 19:23 

20% 

Monthly 

2013-01-24 19:21 

100ft 

Monthly 

2013-01-24 19:21 

20ft. 

Monthly 

2013-01-24 19:21 

20% 

Monthly 

2013-01-24 19:20 

20% 

Monthly 

2013-01-24 19:20 

60% 

Weekly 

2013-01-24 17:51 

60% 

Weekly 

2013-01-24 1 7:50 

60% 

Weekly 

201 3-01-22 07:05 

60% 

Weekly 

2013-01-21 20:21 

60% 

Weekly 

2013-01-21 20: 1 8 

60% 

Weekly 

201 3-01 -21 19:43 

Brachhold. This XSLT template is released under GPL. 


Whenever you update the website, run the "Rebuild the sitemap". 
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Add the XML Sitemap to Google Webmaster Tools 

Within the XML Plugin page, you will find links on the right side. This is shortcuts to the various indexing facilities. 


Result of the last build process, started on January 29, 2013 1:18 pm. 

Your sitemap was last built on January 29, 2013 1:18 pm 
Your sitemap (zipped) was last built on January 29, 2013 1:18 pm. 

Google was successfully notified about changes. 

Bing was successfully notified about changes. 

The building process took about 6.08 seconds to complete and used 25.25 MB of memory. 

If you changed something on your server or blog, you should rebuild the sitemap manually. 

If you encounter any problems with the build process you can use the debug (unction to get more information. 

There is a new beta version of this plugin available which supports the new multi-site feature of WordPress as well as many other new functions! More information and download 

Basic Options 

Sitemap files: Learn more 

[w] Write a normal XML file (your filename) 

® Write a gzipped file (your filename + ,gz) 


About this Plugin: 

J Plugin Homepage 
^ Suggest a Feature 
B Notify List 
W Support Forum 
ijt Report a Bug 
P Donate with PayPal 
^ My Amazon Wish List 


Rebuild sitemap if you change the content of your blog 
0 Enable manual sitemap building via GET Request [ 2 ] 
Update notification: Learn more 
W\ Notify Google about updates of your Blog 



Sitemap Resources: 


Click Webmaster Tools 

[ Webmaster Tools ] 



{] Webmaster Blog 
ts> Webmaster Tools 
ls> Webmaster Center Blog 



y Sitemaps Protocol 
Official Sitemaps FAQ 
My Sitemaps FAQ 



Google Wetyngster Tools: 

Create an account for yourself. When done, log in to the account. 



Webmaster Tools 

Improve your site's visibility in Google search results It's free 

Google Webmaster Tools provides you with detailed reports about your pages' visibility on Google To get 
started simply add and verify your site and you'll start to see information right away Learn more > 


A 

■s 


Get Google's view of your site and diagnose problems 

See how Google crawls and indexes your site and learn about specific problems we're having 
accessing it 


Discover your link and query traffic 

View, classify, and download comprehensive data about internal and external links to your site 
with new link reporting tools Find out which Google search queries drive traffic to your site, 
and tee exactly how users arrive there 


Sign In 
Email 

n 



Can! access your account? 


J Share information about your site 

ggg Tel us about your pages with Sitemaps which ones are the most important to you and how 
often they change You can also let us know how you would kke the URLs we mdex to appear 


The homepage will look like this after logging in to your Google Webmaster Account: 





D 



Other Resources 


Welcome to Webmaster Tools 

Get the data, tools, and diagnostics for a healthy. 
Google-friendly site. Here are some of the things you 
can do: 

• Check your site's health for potential Issues that Google has 
detected. 

• Understand your search traffic and learn how users are finding 


• Make optimizations to help Google better understand and 
represent your site. 

To get started, Just add your site now. 



Enter site as explained! 



Add Your Website Now! 






WWW.b0StWOrdpreSSthemeS.CO.Za 


ADDA SITE 





When you click "ADD A Site" after entering the domain you want to index, the following window will appear. Select 
"Alternate method". 


Google 

Webmaster Tools 

Verify your ownership of http://www.bestwordpressthemes.co.za/. Learn more. 

Recommended method ^tematemeth^Tj Select "Alternate methods". You will be uploading a file directly with cPanel! 

Recommended: HTML tag 

Add a meta tag to your site's home page. 

1. Copy the meta tag below, and paste it into your site's home page. It should go in the <head> section, before the first <body> section. 

cmeta name-’google-site-verification" content=”PLgN6OoqVPu4hmy0AGfdJdmtK_rhOmcdAYjqAvED1-0" /> 

► Show me an example 

2. Click Verify below 

To stay verified, don't remove the meta tag, even after verification succeeds. 
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Alternate Method: a Few steps are required in order to let Google know that you are indeed the administrator of the 
website. To stay verified, don't remove the file! 


Google 


Upload through cPanel and Verify! 


Webmaster Tools 


Verify your ownership of http://www.bestwordpressthemes.co.za/. Learn more. 


Recommended method I Alternate methods 




® HTML file upload 

Upload an HTML file to your site. 

1. Download this HTML verification file, [go ogiledec3bf42d93c9e19.html] 

2. Upload the file to http://www.bestwordpressthemes.co.za/ 

3. Confirm successful upload by visiting http://www.bestwordpressthemes.co.za/googledec3bf42d93c9e19.html in your browser. 

4. Click Verify below. 

To stay verified, don't remove the HTML file, even after verification succeeds. 


J) 


© Google Analytics 

Use your Google Analytics account. 

Domain name provider 

Sign in to your domain name provider. 



Step 1: Download the HTML verification file and upload the file through cPanel. 
Do the following: 

Click on the "Download this HTML verification file [googledec ]" 


Verify your ownership of http://www.bestwordpressthemes.co.za/. Learn more 


Recommended method 


r l 

I Alternate methods I 


• HTML file upload 

Upload an HTML file to your site 


Click Here... 




1. Downloacfl^ [googledec3bf42d93c9e19.html] 

2. Upload the file to http://www.bestwordpressthemes.co.za/ 

3. Confirm successful upload by visiting http://www.bestwordpressthemes co za/googledec3bf42d93c9e19 html 

4. Click Verify below. 

To stay verified, don’t remove the HTML file, even after verification succeeds 


Google Analytics 

Use your Google Analytics account. 

Domain name provider 

Sign in to your domain name provider. 


Opening googledec3bf42d93c9el9.html 



Save the file to your folder. 


Save the file to the location (folder) you created for all your files. Keep this file saved as well. The next step will be to 
upload the file to the root directory of the website. This can be done with cPanel. 
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Go to: http://www.yourdoaminname.co.za:2082 

Remember to add the :2082 at the end of the URL to access cPanel. You can also use /cpanel. 


Log in to cPanel and go directly to the root of the domain. 


Mailing 

Lists 


M 

Google 

Apps 

Wizard 


d 


Aceo u nt 
Level 
Filtering 


User Level 
Filtering 


Nfc * j# 


Backups Backup 

File 

Wizard 

M anager 



% 


FTP 


S ess i 0 n 


Control 



tmail import tmail MX Entry 

lbles flrlrlrs-c-ca-c/ fli ithantiratinn 


ll 

Lh 

Me 


File Manager Directory Selection 

Directory Selection 

Please select a directory to open: 

0 ft Home Directory 



c 




Web Rppt (public_html^www) 


3 


Public FTP RDDt &njblic_ftp} 

Ojgj 

fb& 


Hnnimant □ n r.4 1 fr.r- 


bestwordpressthemes.co.za 


3 


Show Hidden Files (dotfiles). 

[ I Skip this qu estip n , □ nd a I w ays p p e n th is d ire ctp ry in th e futu re w h e n 
ppening File Manager. 




Select File Manager - Select Upload 


| | v x i ai * f 





In file manager, select upload and select the file you downloaded from Google 
Webmaster Tools. When chosen, select open to upload. 


The following window will appear. Browse for the file and select Open when 
Done. 


j XML-Sitemap Generator < My First W... , i j XML Sitemap 


j Webmaster Tools -Verify ownership cPcPaneIX 


CP cPanel File Manager v3 


CP cPanel X 


bestwordpressthemes.co.za:2 082/cpsess7627114954/frontend/x3/filemanager/u| 


|A[i Most Visited [..] Getting Started 1^) Latest Headlines lot Lorem Ipsum - All the ... 

iS 

Maximum file size allowed for upload: 1.91 GB 

Please select files to upload to /home/h3m2wwdl/public_htn 


Browse for File, Select and Open! 

1 Browse- 1 


Overwrite existing files: B 
Mode User Group World 

Read El El El 

Write El □ □ 

Execute BOO 
Permission 6 4 4 


ID File Upload 

| * ► Computer 

Organize ▼ New folder 
B Desktop 
Downloads 
Recent Places 

A E Desktop 
* Libraries 

> (3 Documents 

> J*> Music 

> S Pictures 

> Q| Videos 

t> ^ Homegroup 
> JP. BabbaT 
A Computer 
A & Local Disk (C) 
t> yL Games 


Local Disk (C) ► wamp ► temp websites ► myfirstwebsite.co.za ► 


Size 


38 883 KB 
1KB 
2 KB 
1299 KB 
15 027 KB 

The Google Webmaster Tools Verification File. 


^ images 
Jjb WWW 

^^^reethemef^es^ 


f □ googledec3bf42d93c9el9^ 
mydomainname.co.za details 
Q myfirstwebsite.sql 
§ myfirstwebsite 


Date modified 


Type 


2013/01/29 11:32 ... File folder 
2013/01/24 09:10 ... File folder 

2012/11/05 12:25 ... WinRAR ZIP archive 
2013/01/29 04:08 ... Firefox HTML Doc... 

2013/01/28 12:50 ... Text Document 

2013/01/28 09:57 ... SQL File 

2013/01/28 09:57 ... WinRAR ZIP archive 


When done click on Back to /home. 



googledec3bf42d93c9el9.html: 53 Bytes complete 



Back to /home/h3m2wwdl/public html 


The file is uploaded! 
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After uploading the verification file, it will show within the file manager under the root directory of the website. 


XML-Sitemap Generator < My First W... 


j XML Sitemap 


; | w Webmaster Tools - Verify ov> 


bestwordpressthemes.co.za:2082 cpsess7627114954/frontend/x3/filemanager/index.html?dirselect=webroot&domaii 


Most Visited [_] Getting Started [^i Latest Headlines lot' Lorem Ipsum - All the ... 


File Manager settin 


i ® J a 14 ^ 

New File New Copy Move File Upload Download 

Folder 

* 

Delete 

^ ^ ^ Si v? 

Rename Edit Code HTML Change 

Editor Editor Permiss... 

SV www [ Go ] 

^ Home 

if.- Up One Level ^ Back ^ Forward O Reload 



Name 

f= Collapse all 




(■' 

wp-admin 

1=1 (/home/h3m2wwdl) 




(■ 

wp-content 

rCi access-logs 






i"fc£3 mail 

^ googledec3bf42d93c9e19.html J 

S ^ public_ftp V 


ii 

>: public_html 

s 

license.txt 




[s a^www; J 

© 

myfirstwebsite.zip 


a 

readme.html 

The verification file is now 

a 

sitemap.xml 

uploaded to the Root Directory! 

© 

sitemap.xml.gz 



wp-activate.php 



w p-bk) g-header. ph p 



w p-co mments-post. ph p 


£H!f 

wp-configphp 



wp-cron.php 


m 

wp-links-opml.php 


m 

wp-load.php 


ef 

wp-login.php 


esr 

wp-maH.php 


ef 

wp-settings.php 



wp-signup.php 


PHP 

wp-trackback.php 



xmlrpc.php 


The first step is done. You con view the file by clicking on the link provided: 

1. Download this HTML verification file, [googledec3bf42d93c9e13.html] 

2. Upload the file to http://www.bestwordpressthemes.co.za/ Click tO view file. 

3. Confirm successful upload by vi s it i your browser 

4. Click Verify below. 

To stay verified, don't remove the HTML file, even after verification succeeds. 


Next , click to Verify! 


Google 

Webmaster Tools 

Verify your ownership of http://www.bestwordpressthemes.co.za/. Learn more 
Recommended method Alternate methods 

® HTML file upload 

Upload an HTML file to your site. 

1. Download this HTML verification file, [googledec3bf42d93c9e19.html] 

2. Upload the file to http://www.bestwordpressthemes.co.za/ 

3. Confirm successful upload by Visitingihttp://wwwbestwordpressthemes.co.za/googledec3bf42d93c9e19.html in your browser. 

4. Click Verify below. 

To stay verified, don't remove the HTML file, even after verification succeeds. 


© Google Analytics 

Use your Google Analytics account. 

© Domain name provider 

Sign in to your domain name provider. 

Not now click "Verify" 



129 | P a g e 


BestWordPressThemes. co.za 





Once the file is verified , you will be notified. The website is now verified and Google will index the files within time. Please 
note that Google may or may not index all files. Take the time and learn more.... 


XML-Sitemap Generator < My First W... XML Sitemap 


| u Webmaster Tools - Verification succe... 


^ fi http k//www. g o o g I e. c o m/web m a sters/verif i c ati o n/verif i c ati o n - s u c c ess ? h I = en &s iteU rl = http ://www, b estwo rd p res sth eni es . c o .za/Si 


Most Visited Getting Started Latest Headlines lot* Lorem Ipsum - All the ... 


+You Search Images Maps Play YouTube News Gmail Drive Calendar More 



Webmaster Tools 


The file was Verified! 


Congratulations, you have successfully verified your ownership of http://www.bestwordpressthemes.co.za/. 

Continue 


It's always good to check your accounts. To find statistics for the website, log in on another day. Google takes time to 
collect data, so be patient! 


: XML-Sitemap Generator. My First W... J XML Sitemap 


x | “j| Webmaster Tools - Dashboard - http:... x [ cP cPanel X 


| CP cPanel File Manager v3 


^ A https://v»wwfloogltcom/webmasters/tools/dashboard?hl=en&siteUrl=http://www.bestwordpressthemes.co.za/&authuser=0&sig=ALjLGbPEMae7jDX_wS0sxVHaEuSCZtSlg 


0 Most Visited [J Getting Started 0 Latest Headlines llir Lorem Ipsun 


+You Search Images Maps Play YouTube News Gmail Drive Calendar More - 



Webmaster Tools 

Dashboard 

Messages 

► Configuration 

► Health 

► Traffic 

► Optimization 
i ' Labs 


Collect statistics for the website and learn more to enable Google to index more of your website's pages and post etc. 
Log in from time to time to see what is going on with the account. 

New and important 

No new messages or recent critical issues. View all 

Current Status 

Crawl Errors 

No data available. (Why not?) 


)) Search Queries 

No data available. (Why not?) 


» Sitemaps 

Why submit a Sitemap? 


www.bestwordpressthemes.co.za *■ Help ▼ 


No Sitemaps )) 


You've just verified that you have the privileges and authorisation to access the website files. Next , you have to add the 
sitemap to the Google account. Do the following: 

Go to: Optimization/Sitemaps/Select ADD/TEST SITEMAP. 


| (Si Webmaster Tools - Sitemaps - http://w... | + 

4 1 A https://www.google.com/webmasters/too 

0 Most Visited [.J Getting Started 0 Latest Headlines lor Lorem Ipsum - All the ... 


ap-list?hl=en&siteUrl=http%3A%2F%2Fwww.bestwordpressthemes.co.za%2F*MAIN_TAB=0 


_P ft * - E 


♦You Search Images Maps Play YouTube News Gmail Drive Calendar More - 


Google 

Webmaster Tools 

Dashboard 

Messages 

► Configuration 

► Health 

► Traffic 


Go to: Optimization/Sitemaps/Select ADD/TEST SITEMAP 


Sitemaps 


By me (0) All (0) 

You have not submitted any sitemaps for this site. 


info@bestwordpressthemes.ci 

© www.bestwordpressthemes.co.za - Help 

Step 2 - Click on ADD/TEST SITEMAP I 


^^ptimizatiorj 

r sitemap: | step 1 - Click on Sitemaps 

Remove URLs 
HTML Improvements 
Content Keywords 
Structured Data 
Data Highlighter 
Other Resources 
► Labs 
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Adding a sitemap: 


info@bestwordpressthem0s.co.za ▼ 

This will add a sitemap for the current domain! 

© www.bestwordpressthemes.co.zfl T Help ▼ 



Test Sitemap 


Cancel 


Enter: 

sitemap.xml at the end of the root URL - Click Submit Sitemap 


After selecting Submit Sitemap the following will appear: Refresh the page. 


Google 



info@bestwordpressthemes.co 

Webmaster Tools 



©www.bestwordpressthemes.co.za Help 

Dashboard 
Messages 
► Configuration 

Sitemaps 

Click Refresh the page. 



Sitemap submitted^ Refresh the page /J Close 


► Health 




► Traffic 

By me (0) All (0) 



▼ Optimization 

You have not submitted any sitemaps for this site. 



[Sitemaps | 




Remove URLs 
HTML Improvements 
Content Keywords 
Structured Data 
Data Highlighter 
Other Resources 
► Labs 





The Sitemap has been added! Visit the sitemap by using the link http://www.yourdomainname.co.za/sitemap.xml 


Webmaster Tools 


© www.bestwordpressthemes.ee 


Sitemaps 


Messages 

► Configuration 

► Health 

► Traffic 

» Optimization 
Sitemaps 
Remove URLs 
HTML Improvements 
Content Keywords 
Structured Data 
Data Highlighter 
Other Resources 

► Labs 


ie(1) All (1) 



Sitemaps (All content types) 
Download All Resubmit 


Sitemap has been added! - Wait a few days and come back to check the status of the account. 


Sitemaps content ^ 

All content types 

■ Submitted 

Web pages 

1 4 Submitted 





14 Web Pages added within the sitemap. Please note that not all the pages will be indexed! 



Thats it! Your done with all the basics! You can now say: "I designed my own website". 

You've designed your own website and you have indexed the website for the first time. The work never stops. 

Go ahead and create a website to your own taste... Use your own Custom Theme , widgets and plugins. Be Creative. 

Thank You! 

The End 
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Few Custom Themes Samples: 
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Disclaimer! 

Please read the disclaimer for this free E-Book. 

The information contained in this FREE E-Book, and its several complementary guides, is meant to serve as a 
comprehensive collection of time-tested and proven strategies that the authors of this eBook have applied. Summaries, 
strategies, tips and tricks are only recommendations by the authors, and reading this eBook does not guarantee that 
one's results will exactly mirror our own results. The authors of this FREE E-Book have made all reasonable efforts to 
provide current and accurate information for the readers of this eBook. The authors will not be held liable for any 
unintentional errors or omissions that may be found. 

The material in this FREE E-Book may include information, products, or services by third parties. Third Party materials 
comprise of the products and opinions expressed by their owners. As such, the authors of this guide do not assume 
responsibility or liability for any Third Party Material or opinions. 

The publication of such Third Party materials does not constitute the authors' guarantee of any information, instruction, 
opinion, products or service contained within the Third Party Material. Use of recommended Third Party Material does 
not guarantee that your results, with BestWordPressThemes.co.za will mirror our own. Publication of such Third Party 
Material is simply a recommendation and expression of the authors' own opinion of that material. 

Whether because of the general evolution of the Internet, or the unforeseen changes in company policy and editorial 
submission guidelines, what is stated as fact at the time of this writing, may become out-dated or simply inapplicable at 
a later date. This may apply to the BestWordPreesThemes.co.za website platform, as well as, the various similar 
companies that we have referenced in this eBook, and our several complementary guides. Great effort has been exerted 
to safeguard the accuracy of this writing. Opinions regarding similar website platforms have been formulated as a result 
of both personal experience, as well as the well documented experiences of others. 

No part of this publication shall be reproduced, transmitted or resold in whole or in part in any form, without the prior 
written consent of the authors. All trademarks and registered trademarks appearing in this FREE E-Book are the 
property of their respective owners. 

The authors do not warrant the performance, effectiveness or applicability of any sites listed or linked to in this E-Book. 

All links are for information purposes only and are not warranted for content, accuracy or any other implied or explicit 
purpose. 
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This book was distributed courtesy of: 


Or u 

Free-eBooksnet 

For your own Unlimited Reading and FREE eBooks today, visit: 

http://www.Free-eBooks.net 


Share this eBook with anyone and everyone automatically by selecting any of the 

options below : 



To show your appreciation to the author and help others have 
wonderful reading experiences and find helpful information too, 
we'd be very grateful if you'd kindly 
post your comments for this book here . 



COPYRIGHT INFORMATION 


Free-eBooks.net respects the intellectual property of others. When a book's copyright owner submits their work to Free-eBooks.net, they are granting us permission to distribute such material. Unless 
otherwise stated in this book, this permission is not passed onto others. As such, redistributing this book without the copyright owner's permission can constitute copyright infringement. If you 
believe that your work has been used in a manner that constitutes copyright infringement, please follow our Notice and Procedure for Making Claims of Copyright Infringement as seen in our Terms 

of Service here: 


http://www.free-ebooks.net/tos.html 




At our sister website, Fobokojrom, we provide you 
with a free Social Publishing Wizard 1 which guides 
you every step of the eBook creation/writing 
process and let's your friends or the entire 
community help along the way! 


vi vi uiihninmu 

AND BECOME AN 
AUTHOR YOURSELF 




iF's Free., Eas\| and Fun! 


LDBONONTOFOBOKD.COM J 



and ^our s+onj +o!d! 





